mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
fix: handle other elements before the svg element (#12516)
* fix multiple root nodes * add changeset * remove conditional * handle no svg case
This commit is contained in:
Michael Stramel
GitHub
parent
1ec852e204
commit
cb9322c763
5 changed files with 102 additions and 1 deletions
5
.changeset/eight-seahorses-attend.md
Normal file
5
.changeset/eight-seahorses-attend.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Handle multiple root nodes on SVG files
|
||||||
|
|
@ -5,7 +5,13 @@ import type { ImageMetadata } from '../types.js';
|
||||||
|
|
||||||
function parseSvg(contents: string) {
|
function parseSvg(contents: string) {
|
||||||
const root = parse(contents);
|
const root = parse(contents);
|
||||||
const [{ attributes, children }] = root.children;
|
const svgNode = root.children.find(
|
||||||
|
({ name, type }: { name: string; type: number }) => type === 1 /* Element */ && name === 'svg',
|
||||||
|
);
|
||||||
|
if (!svgNode) {
|
||||||
|
throw new Error('SVG file does not contain an <svg> element');
|
||||||
|
}
|
||||||
|
const { attributes, children } = svgNode;
|
||||||
const body = renderSync({ ...root, children });
|
const body = renderSync({ ...root, children });
|
||||||
|
|
||||||
return { attributes, body };
|
return { attributes, body };
|
||||||
|
|
|
||||||
|
|
@ -273,6 +273,17 @@ describe('astro:assets - SVG Components', () => {
|
||||||
assert.equal(!!$svg.attr('xmlns:xlink'), false);
|
assert.equal(!!$svg.attr('xmlns:xlink'), false);
|
||||||
assert.equal(!!$svg.attr('version'), false);
|
assert.equal(!!$svg.attr('version'), false);
|
||||||
});
|
});
|
||||||
|
it('ignores additional root level nodes', () => {
|
||||||
|
let $svg = $('#additionalNodes');
|
||||||
|
// Ensure we only have the svg node
|
||||||
|
assert.equal($svg.children().length, 1);
|
||||||
|
assert.equal($svg.children()[0].name, 'svg');
|
||||||
|
$svg = $svg.children('svg');
|
||||||
|
assert.equal($svg.length, 1);
|
||||||
|
assert.equal(!!$svg.attr('xmlns'), false);
|
||||||
|
assert.equal(!!$svg.attr('xmlns:xlink'), false);
|
||||||
|
assert.equal(!!$svg.attr('version'), false);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
describe('additional props', () => {
|
describe('additional props', () => {
|
||||||
let $;
|
let $;
|
||||||
|
|
|
||||||
75
packages/astro/test/fixtures/core-image-svg/src/assets/dragon.svg
vendored
Normal file
75
packages/astro/test/fixtures/core-image-svg/src/assets/dragon.svg
vendored
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">
|
||||||
|
<path fill="#21254D" d="M1149.767,351.752l-13.847-51.984c-0.428-1.607-1.424-3.006-2.807-3.932
|
||||||
|
c-116.259-77.893-123.702-80.762-126.805-80.546c-2.768-0.074-18.072-1.596-38.069-3.69l-72.68-51.705
|
||||||
|
c-2.336-1.658-5.455-1.694-7.827-0.08c-2.372,1.61-3.488,4.525-2.805,7.307l8.985,36.471c-1.214-0.133-2.421-0.267-3.606-0.397
|
||||||
|
l-68.456-38.816c-2.735-1.552-6.159-1.044-8.331,1.221c-2.172,2.265-2.528,5.713-0.865,8.375l33.101,53.023
|
||||||
|
c-0.61,0.871-1.05,1.878-1.199,3.006l-19.479,146.694l-42.846,20.451L629.187,210.472l-2.636-5.442
|
||||||
|
c-0.134-0.278-0.309-0.521-0.474-0.772c-0.058-0.088-0.105-0.185-0.166-0.27c-0.36-0.495-0.793-0.934-1.276-1.319
|
||||||
|
c-0.1-0.08-0.207-0.15-0.311-0.224c-0.51-0.361-1.058-0.68-1.668-0.895c-0.006-0.002-0.012-0.008-0.019-0.01
|
||||||
|
c-0.002,0-0.003,0-0.005-0.001c-0.629-0.216-1.276-0.311-1.917-0.342c-0.109-0.005-0.216-0.015-0.323-0.015
|
||||||
|
c-0.632,0-1.259,0.077-1.861,0.245c-0.085,0.024-0.166,0.065-0.251,0.092c-0.298,0.096-0.596,0.184-0.887,0.324
|
||||||
|
c-0.216,0.105-0.4,0.246-0.6,0.37c-0.113,0.069-0.231,0.133-0.339,0.208c-0.505,0.354-0.969,0.777-1.373,1.271
|
||||||
|
c-0.025,0.03-0.061,0.047-0.085,0.078l-74.165,94.097l-98.243-98.922l-19.278-49.818c-0.144-0.372-0.318-0.724-0.517-1.056
|
||||||
|
c-0.023-0.039-0.055-0.073-0.079-0.111c-0.203-0.321-0.433-0.629-0.694-0.921c-0.025-0.029-0.042-0.062-0.069-0.091
|
||||||
|
c-0.066-0.072-0.147-0.123-0.217-0.192c-0.211-0.209-0.429-0.406-0.66-0.583c-0.124-0.095-0.251-0.183-0.381-0.269
|
||||||
|
c-0.225-0.149-0.457-0.281-0.694-0.4c-0.138-0.069-0.273-0.141-0.414-0.201c-0.265-0.111-0.537-0.198-0.812-0.275
|
||||||
|
c-0.121-0.034-0.239-0.079-0.362-0.107c-0.39-0.087-0.786-0.143-1.185-0.161c-0.014-0.001-0.028-0.005-0.041-0.005
|
||||||
|
c-0.393-0.016-0.793,0.001-1.195,0.054c-0.023,0.003-0.046,0.012-0.07,0.016c-0.105,0.015-0.204,0.049-0.307,0.069
|
||||||
|
c-0.306,0.059-0.61,0.128-0.908,0.23c-0.136,0.046-0.263,0.107-0.393,0.161c-0.259,0.106-0.513,0.223-0.76,0.362
|
||||||
|
c-0.131,0.074-0.257,0.155-0.382,0.237c-0.239,0.157-0.471,0.331-0.694,0.522c-0.069,0.059-0.146,0.099-0.214,0.16l-63.651,58.805
|
||||||
|
L58.531,290.2c-2.885,0.846-4.886,3.475-4.931,6.481c-0.044,3.01,1.878,5.694,4.741,6.621l144.239,46.762l19.483,58.805
|
||||||
|
c0.003,0.008,0.009,0.016,0.013,0.024c0.15,0.45,0.344,0.879,0.579,1.282c0.047,0.079,0.114,0.149,0.164,0.228
|
||||||
|
c0.2,0.311,0.411,0.615,0.659,0.89c0.129,0.144,0.289,0.267,0.433,0.402c0.175,0.164,0.331,0.34,0.526,0.488
|
||||||
|
c0.023,0.018,0.05,0.025,0.074,0.042c0.418,0.308,0.865,0.578,1.349,0.785c0.042,0.018,0.08,0.034,0.122,0.052
|
||||||
|
c0.005,0.003,0.011,0.005,0.017,0.008c80.867,34.808,104.606,44.813,112.02,47.748c4.667,8.674,23.37,50.074,34.834,75.878
|
||||||
|
c0.069,0.153,0.177,0.27,0.254,0.415c0.167,0.311,0.34,0.615,0.546,0.89c0.143,0.193,0.308,0.37,0.473,0.548
|
||||||
|
c0.127,0.138,0.228,0.297,0.367,0.426l122.784,112.203l-52.983,48.629c-1.304,1.195-2.094,2.846-2.207,4.611l-1.111,17.352
|
||||||
|
l-143.586,8.185c-0.668-0.967-1.577-1.782-2.708-2.315L59.774,617.192c-3.022-1.425-6.655-0.448-8.557,2.305
|
||||||
|
c-1.906,2.759-1.54,6.489,0.865,8.821l199.852,193.809l-4.457,12.099c-1.299,3.522,0.475,7.432,3.982,8.773l182.099,69.715
|
||||||
|
c0.033,0.013,0.069,0.014,0.102,0.026c0.46,0.168,0.937,0.301,1.44,0.368c0.002,0,0.004,0,0.006,0l0.001,0c0.002,0,0.002,0,0.003,0
|
||||||
|
c0.153,0.02,0.306,0.034,0.46,0.044c0.372,0.024,0.733-0.005,1.093-0.04c0.079-0.008,0.162,0.002,0.239-0.009
|
||||||
|
c0.531-0.07,1.053-0.213,1.559-0.408c0.039-0.015,0.082-0.016,0.121-0.032l169.201-68.56l91.667,196.02
|
||||||
|
c0.992,2.118,2.992,3.586,5.309,3.893l84.109,11.169c3.753,0.498,7.2-2.141,7.699-5.894c0.421-3.173-1.399-6.123-4.237-7.263
|
||||||
|
c-3.591-2.125-22.579-16.393-43.405-32.347c0.154-0.421,0.268-0.862,0.338-1.322l11.604-76.523l53.043,67.644
|
||||||
|
c0.114,0.145,0.254,0.261,0.377,0.395c0.167,0.182,0.326,0.373,0.51,0.535c0.16,0.14,0.344,0.251,0.516,0.376
|
||||||
|
c0.187,0.134,0.365,0.282,0.563,0.397c0.195,0.113,0.412,0.193,0.619,0.287c0.198,0.089,0.387,0.195,0.591,0.265
|
||||||
|
c0.42,0.143,0.859,0.251,1.315,0.311l70.516,9.364c2.954,0.392,5.825-1.168,7.098-3.863c1.276-2.694,0.665-5.903-1.512-7.941
|
||||||
|
l-41.413-38.746l-39.747-222.685c-0.131-0.742-0.406-1.416-0.747-2.044l2.808-3.703l14.844,15.492
|
||||||
|
c1.106,1.157,2.543,1.855,4.047,2.054c1.453,0.193,2.972-0.078,4.314-0.849c2.734-1.569,4.044-4.796,3.184-7.825l-7.943-27.886
|
||||||
|
l36.804-74.853c19.828,14.317,80.161,59.635,121.469,90.837c0.97,0.733,2.087,1.175,3.228,1.327
|
||||||
|
c1.822,0.242,3.722-0.252,5.224-1.471c2.449-1.988,3.228-5.387,1.887-8.239l-81.902-174.279c-0.689-1.461-1.839-2.54-3.181-3.203
|
||||||
|
l62.211-126.53c0.329-0.669,0.546-1.387,0.644-2.123l7.541-56.788l57.852,0.849c0.29,0.734,0.693,1.437,1.251,2.057l42.361,47.074
|
||||||
|
c1.118,1.243,2.615,2.002,4.195,2.212c1.158,0.154,2.362,0.013,3.494-0.448c2.678-1.093,4.381-3.748,4.258-6.638l-1.836-43.469
|
||||||
|
l43.69,0.641c2.147,0.032,4.185-0.944,5.504-2.64C1149.87,356.041,1150.323,353.828,1149.767,351.752z M902.66,181.776
|
||||||
|
l37.771,26.871c-10.644-1.142-21.58-2.327-32.004-3.464L902.66,181.776z M769.484,403.232l-28.441,13.576
|
||||||
|
c-0.084,0.04-0.152,0.098-0.234,0.141c-0.249,0.132-0.489,0.276-0.719,0.436c-0.132,0.093-0.266,0.186-0.392,0.288
|
||||||
|
c-0.207,0.167-0.396,0.349-0.579,0.536c-0.109,0.111-0.224,0.215-0.325,0.332c-0.213,0.248-0.4,0.516-0.575,0.793
|
||||||
|
c-0.045,0.07-0.1,0.133-0.143,0.205c-0.206,0.353-0.378,0.728-0.521,1.12c-0.044,0.12-0.067,0.249-0.104,0.372
|
||||||
|
c-0.069,0.231-0.149,0.457-0.194,0.698l-1.619,8.613l-80.874-167.039L769.484,403.232z M821.04,718.49L716.035,608.903
|
||||||
|
l29.33-156.074L821.04,718.49z M627.138,237.708L731.38,453.01l-5.803,30.881l-98.923-99.607L627.138,237.708z M613.458,227.874
|
||||||
|
l-0.472,142.649l-62.42-62.852L613.458,227.874z M714.932,492.634l-111.52,121.933L454.927,230.835L714.932,492.634z
|
||||||
|
M325.983,226.279l-119.69,110.575L83.732,297.12L325.983,226.279z M379.931,195.109L230.974,392.164l-15.079-45.511
|
||||||
|
L379.931,195.109z M402.432,188.079l-62.278,258.86c-15.053-6.25-63.714-27.099-100.841-43.068L402.432,188.079z M399.362,259.464
|
||||||
|
l-24.518,247.988c-12.34-27.633-19.04-42.212-23.132-49.928L399.362,259.464z M386.281,531.168l34.628-350.249l9.427,24.363
|
||||||
|
l0.027,0.068l162.337,419.537l-58.097,41.826L386.281,531.168z M91.139,647.092l192.017,90.283l-26.036,70.679L91.139,647.092z
|
||||||
|
M266.29,822.824c0.036-0.093,0.071-0.182,0.105-0.276l29.006-78.743l144.69-8.248l-10.326,161.024l-167.081-63.966L266.29,822.824z
|
||||||
|
M455.593,708.044l51.842-47.583l22.03,20.131c2.395,2.182,5.997,2.397,8.633,0.501l61.947-44.597l60.266,66.435l41.734,88.186
|
||||||
|
L443.55,895.861L455.593,708.044z M730.18,962.051l-11.994-167.794c-0.013-0.203-0.07-0.39-0.101-0.587
|
||||||
|
c-0.034-0.216-0.057-0.434-0.112-0.646c-0.073-0.278-0.18-0.546-0.288-0.814c-0.052-0.131-0.08-0.268-0.14-0.396l-0.08-0.17
|
||||||
|
l-0.008-0.018l-25.427-53.729l53.461,58.934L730.18,962.051z M763.422,1037.976l-53.136-7.056L620.512,838.95l84.668-34.307
|
||||||
|
l14.05,196.588c0.141,1.943,1.101,3.74,2.644,4.934C740.587,1020.638,753.896,1030.815,763.422,1037.976z M746.359,936.046
|
||||||
|
l1.969-21.247c-0.341-1.445-0.191-2.952,0.398-4.307l10.695-115.401c0.18-1.915-0.455-3.816-1.746-5.24l-85.842-94.629l-0.423-0.892
|
||||||
|
c-0.719-1.521-1.938-2.626-3.357-3.275l-57.772-63.684l111.172-121.554l-19.55,104.014c-0.41,2.174,0.259,4.411,1.789,6.009
|
||||||
|
l79.043,82.492c-0.29,0.601-0.524,1.238-0.629,1.932l-10.115,66.714l-1.329,8.767l-20.046,132.208l-1.361,8.975L746.359,936.046z
|
||||||
|
M832.994,990.153l14.21-16.022l22.309,20.872L832.994,990.153z M839.411,962.248l-19.781,22.304l-55.939-71.334l21.339-140.729
|
||||||
|
l16.604-21.896L839.411,962.248z M789.333,744.117l5.093-33.585l11.373,11.871L789.333,744.117z M828.248,693.737l-76.069-267.05
|
||||||
|
l74.433-35.529l47.821,208.646L828.248,693.737z M876.787,626.1l18.968-38.579l73.318,107.328
|
||||||
|
C937.689,671.223,892.633,637.418,876.787,626.1z M951.509,644.828l-47.884-70.096c-0.297-0.435-0.642-0.813-1.013-1.157
|
||||||
|
l7.881-16.028L951.509,644.828z M966.792,411.962L884.03,580.287l-45.686-199.331l18.158-136.744l68.558,109.821
|
||||||
|
c1.088,1.745,2.898,2.898,4.912,3.165c0.262,0.035,0.533,0.054,0.803,0.059l43.198,0.634L966.792,411.962z M1086.686,384.732
|
||||||
|
l-22.97-25.524l21.904,0.321L1086.686,384.732z M934.712,343.6l-96.114-153.961l46.172,26.181c0.808,0.455,1.615,0.758,2.633,0.85
|
||||||
|
c68.52,7.556,108.06,11.658,117.828,12.232c9.279,4.613,75.847,48.595,118.104,76.892l10.852,40.735L934.712,343.6z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
import Alpine from '~/assets/alpine-multi-color.svg'
|
import Alpine from '~/assets/alpine-multi-color.svg'
|
||||||
|
import Dragon from '~/assets/dragon.svg'
|
||||||
---
|
---
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -9,5 +10,8 @@ import Alpine from '~/assets/alpine-multi-color.svg'
|
||||||
<div id="base">
|
<div id="base">
|
||||||
<Alpine />
|
<Alpine />
|
||||||
</div>
|
</div>
|
||||||
|
<div id="additionalNodes">
|
||||||
|
<Dragon />
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue