从 adobe illustrator 导出的 svg 文件不会在 HTML Canvas 上呈现

Posted 2023-03-24

【中文标题】从 adobe illustrator 导出的 svg 文件不会在 HTML Canvas 上呈现

【英文标题】：svg files exported from adobe illustrator aren't rendered on HTML Canvas

【发布时间】：2021-12-14 12:12:52

【问题描述】：

我目前正在使用 html5 Canvas API 处理一个项目，并希望包含 SVG 格式的图像，但是，我发现从 Adob​​e Illustrator 导出的 SVG 文件不会在画布上呈现。我没有收到任何错误，只是没有出现图像。

这是用于演示目的的代码：

// function to set up a canvas
function makeCanvas(
  width = 256,
  height = 256,
  border = "1px solid black",
  backgroundColor = "white"
) 
  // make the canvas element and add it to the DOM
  let canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  canvas.style.border = border;
  canvas.style.backgroundColor = backgroundColor;
  document.body.appendChild(canvas);
  canvas.ctx = canvas.getContext("2d");

  // return the canvas
  return canvas;


// make the canvas
let canvas = makeCanvas(512, 512);
let ctx = canvas.getContext("2d");

// create an image object
let test = new Image();

// add an event listener for image load
test.addEventListener("load", loadHandler, false);

// set the source of the image file
test.src = "../images/speedboat.svg";

// function to draw the image on canvas once it has finished loading
function loadHandler() 
  ctx.drawImage(test, -0, -0);

这是 Adob​​e 导出的文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320.43 62.94"><defs><linearGradient id="linear-gradient" x1="39.97" y1="-42.69" x2="279.23" y2="95.44" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.39" stop-color="#601d02"/><stop offset="1" stop-color="#ff4e05"/></linearGradient><linearGradient id="linear-gradient-2" x1="0.34" y1="13.97" x2="318.31" y2="13.97" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.21" stop-color="#030100"/><stop offset="0.35" stop-color="#0b0300"/><stop offset="0.46" stop-color="#1a0801"/><stop offset="0.56" stop-color="#2f0e01"/><stop offset="0.66" stop-color="#4a1701"/><stop offset="0.74" stop-color="#6c2102"/><stop offset="0.83" stop-color="#932d03"/><stop offset="0.91" stop-color="#c13b04"/><stop offset="0.98" stop-color="#f44b05"/><stop offset="1" stop-color="#ff4e05"/></linearGradient><linearGradient id="linear-gradient-3" x1="146.1" y1="38.07" x2="146.1" y2="38.07" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="0.49" stop-color="#606060"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient><linearGradient id="linear-gradient-4" x1="146.03" y1="34.28" x2="146.17" y2="41.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffc221"/><stop offset="0.18" stop-color="#fec224"/><stop offset="0.34" stop-color="#fac22f"/><stop offset="0.48" stop-color="#f4c341"/><stop offset="0.62" stop-color="#ebc35a"/><stop offset="0.76" stop-color="#e0c47a"/><stop offset="0.89" stop-color="#d3c5a1"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient><linearGradient id="linear-gradient-5" x1="136.45" y1="43.24" x2="136.56" y2="49.07" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fdc24a"/><stop offset="0.2" stop-color="#fbc24d"/><stop offset="0.38" stop-color="#f7c258"/><stop offset="0.55" stop-color="#efc36a"/><stop offset="0.71" stop-color="#e4c483"/><stop offset="0.86" stop-color="#d6c5a3"/><stop offset="1" stop-color="#c6c6c6"/></linearGradient></defs><title>speedboat</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M1.09,26.44l317.09,1.7C259,55.4,218,61.45,190.71,61.44c-6.33,0-56.71-.36-86,0-15,.18-22.57.33-28.14.44q-12,.24-23.86.56c-13.5-.5-21.24.37-25.5-2.5-4.63-3.13-6.13-6.88-13.31-17C8.69,35.6,4.08,30,1.09,26.44Z" style="fill:#fcee21;stroke:#000;stroke-miterlimit:10"/><path d="M318.21,27.94c-40.67-5.67-78.33-21.84-119-27.5-7.92-.35-19.5,2-35,6-9,2.32-18,3.09-34.39,6.2-20.11,3.8-20.38,4.5-33.79,5.95-13.82,1.49-28.31.34-45.82.85-7.26.2-13.31-.22-18.5,0-7.43.3-11.58.13-15.66.16-2.69,0-5.37-3.47-7.83-2.37-2.65,1.18-7,6.08-7,7.71Z" style="fill:url(#linear-gradient)"/><path d="M318.11,27.93c-2.54-.36-5-.66-7.47-1.05l-7.52-1.37-7.48-1.57-7.45-1.71c-9.91-2.38-19.73-5.09-29.55-7.8C239,9,219.33,3.59,199.15.83h0a64.46,64.46,0,0,0-12.6,1.06c-4.17.7-8.32,1.59-12.45,2.56s-8.22,2.07-12.38,3.08-8.37,1.64-12.56,2.33c-8.4,1.32-16.75,2.76-25.08,4.44S107.49,18,99,18.87A187.73,187.73,0,0,1,73.47,20c-8.52-.06-17-.12-25.49.15-4.26.08-8.53-.08-12.75-.08-2.11,0-4.21.11-6.35.17s-4.27.1-6.4.1H16.11a7,7,0,0,1-3.37-1.08A15.79,15.79,0,0,0,10,17.94a2.3,2.3,0,0,0-1.17-.1,4.35,4.35,0,0,0-1.17.58,16.24,16.24,0,0,0-2.33,1.93,22.08,22.08,0,0,0-2.05,2.29,13.54,13.54,0,0,0-.85,1.23A3.38,3.38,0,0,0,2,24.94l-.79-.81,78.94.61,78.87,1,79.29,1.22Zm.2,0-78.71-.49-79.22-.28-79.62-.54L1.2,25.74H.34l.07-.8a4.09,4.09,0,0,1,.68-1.88,15.52,15.52,0,0,1,1-1.39,24.44,24.44,0,0,1,2.21-2.44A17.24,17.24,0,0,1,6.84,17.1a5.53,5.53,0,0,1,1.69-.79,3.8,3.8,0,0,1,2,.13,16.67,16.67,0,0,1,3,1.49,5.57,5.57,0,0,0,2.61.89l6.38,0c2.12,0,4.24,0,6.35-.07s4.26-.18,6.4-.15c4.27,0,8.5.18,12.74.13,8.48-.24,17-.15,25.5-.06a188.43,188.43,0,0,0,25.38-1.06c8.43-.86,16.68-2.88,25.05-4.45S140.64,10.13,149,8.84c4.19-.67,8.38-1.34,12.5-2.27s8.24-2.08,12.39-3S182.25,1.73,186.45,1a66.53,66.53,0,0,1,12.78-1h0c20.23,2.86,39.92,8.39,59.52,13.9,9.8,2.76,19.61,5.52,29.5,8l7.43,1.75,7.47,1.6,7.5,1.4C313.24,27,315.82,27.52,318.31,27.94Z" style="fill:url(#linear-gradient-2)"/><path d="M277.18,38.07H15" style="fill:url(#linear-gradient-3)"/><path d="M277.18,37.92c0-.07,0,.57,0,.3H275l-2.18,0-4.35,0-4.35,0-2.18,0h-2.17c0,.54,0-.73,0-.6v.6l-61.18.53-61.19.44c-20.39.18-40.79.41-61.18.18S35.41,39,15,38.22v-.3c20.39-.79,40.79-1.05,61.19-1.3s40.79,0,61.18.18l61.19.43,61.18.54v.6c0,.13,0-1.14,0-.6h2.17l2.18,0,4.35,0,4.35,0,2.18,0h2.17c0-.27,0,.37,0,.3Z" style="fill:url(#linear-gradient-4)"/><path d="M246.51,46.26l-110,.7c-18.34.1-36.67.33-55,.2s-36.67-.33-55-.9v-.2c18.33-.58,36.67-.72,55-.9s36.67.09,55,.2l110,.7Z" style="fill:url(#linear-gradient-5)"/></g></g></svg>

顺便说一句，它可以用浏览器打开，但不能在画布上打开。我想知道是否有人知道这是为什么以及如何解决它。目前我发现，如果我将文件导入 vectr.com，然后直接导出它们而不制作任何模组，它们就可以很好地渲染。

执行上述操作后，这是来自 Adob​​e 的相同图像文件：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"   viewBox="0 0 500 500" xml:space="preserve">
<desc>Created with Fabric.js 4.6.0</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 249.42 262.97)" id="OwCWBaXZauXVwoYOZrP2v"  >
<path style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(252,238,33); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.63, -44.44)" d="M 1.09 26.44 L 318.17999999999995 28.14 C 259 55.4 218 61.45 190.71 61.44 C 184.38 61.44 134 61.08 104.71000000000001 61.44 C 89.71000000000001 61.62 82.14000000000001 61.769999999999996 76.57000000000001 61.879999999999995 Q 64.57000000000001 62.12 52.71000000000001 62.44 C 39.21000000000001 61.94 31.47000000000001 62.809999999999995 27.210000000000008 59.94 C 22.58000000000001 56.809999999999995 21.08000000000001 53.059999999999995 13.900000000000007 42.94 C 8.69 35.6 4.08 30 1.09 26.44 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 249.5 232.7)" id="aYFv55jKhxIwdKyh2Obz9"  >
<linearGradient id="SVGID_6" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="39.97" y1="-42.69" x2="279.23" y2="95.44">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="39%" style="stop-color:rgb(96,29,2);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(255,78,5);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_6); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.71, -14.17)" d="M 318.21 27.94 C 277.53999999999996 22.270000000000003 239.88 6.100000000000001 199.20999999999998 0.4400000000000013 C 191.29 0.0900000000000013 179.70999999999998 2.4400000000000013 164.20999999999998 6.440000000000001 C 155.20999999999998 8.760000000000002 146.20999999999998 9.530000000000001 129.82 12.64 C 109.71 16.44 109.44 17.14 96.03 18.59 C 82.21000000000001 20.08 67.72 18.93 50.21 19.44 C 42.95 19.64 36.9 19.220000000000002 31.71 19.44 C 24.28 19.740000000000002 20.130000000000003 19.57 16.05 19.6 C 13.360000000000001 19.6 10.68 16.130000000000003 8.22 17.23 C 5.57 18.41 1.2200000000000006 23.310000000000002 1.2200000000000006 24.94 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 249.11 232.49)" id="5BdeRvNFeXpDNuC8Qwt0e"  >
<linearGradient id="SVGID_7" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="0.34" y1="13.97" x2="318.31" y2="13.97">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="21%" style="stop-color:rgb(3,1,0);stop-opacity: 1"/>
<stop offset="35%" style="stop-color:rgb(11,3,0);stop-opacity: 1"/>
<stop offset="46%" style="stop-color:rgb(26,8,1);stop-opacity: 1"/>
<stop offset="56.00000000000001%" style="stop-color:rgb(47,14,1);stop-opacity: 1"/>
<stop offset="66%" style="stop-color:rgb(74,23,1);stop-opacity: 1"/>
<stop offset="74%" style="stop-color:rgb(108,33,2);stop-opacity: 1"/>
<stop offset="83%" style="stop-color:rgb(147,45,3);stop-opacity: 1"/>
<stop offset="91%" style="stop-color:rgb(193,59,4);stop-opacity: 1"/>
<stop offset="98%" style="stop-color:rgb(244,75,5);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(255,78,5);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_7); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-159.33, -13.96)" d="M 318.11 27.93 C 315.57 27.57 313.11 27.27 310.64 26.88 L 303.12 25.509999999999998 L 295.64 23.939999999999998 L 288.19 22.229999999999997 C 278.28 19.849999999999998 268.46 17.139999999999997 258.64 14.429999999999996 C 239 9 219.33 3.59 199.15 0.83 L 199.15 0.83 C 194.9254108281506 0.7695468586689685 190.70511162006662 1.1245879031585793 186.54999999999998 1.8900000000000095 C 182.38000000000002 2.59 178.23000000000002 3.4800000000000004 174.10000000000002 4.45 C 169.97000000000003 5.42 165.88000000000002 6.52 161.72000000000003 7.53 C 157.56000000000003 8.540000000000001 153.35000000000002 9.17 149.16000000000003 9.86 C 140.76000000000002 11.18 132.41000000000003 12.62 124.08000000000003 14.3 C 115.75000000000003 15.980000000000002 107.49 18 99 18.87 C 90.52554562549393 19.82611932220004 81.99578814595296 20.203660487569486 73.46999999999997 20.000000000000025 C 64.95 19.94 56.47 19.88 47.980000000000004 20.15 C 43.720000000000006 20.229999999999997 39.45 20.07 35.230000000000004 20.07 C 33.120000000000005 20.07 31.020000000000003 20.18 28.880000000000003 20.240000000000002 C 26.740000000000002 20.300000000000004 24.610000000000003 20.340000000000003 22.480000000000004 20.340000000000003 L 16.11 20.340000000000003 C 14.912707185920118 20.274577309314758 13.752292069336121 19.902693533080125 12.739999999999997 19.260000000000005 C 11.871268237448712 18.732859533026932 10.953679528579139 18.29080949809706 9.999999999999993 17.939999999999998 C 9.625221988866867 17.80599382367263 9.22208302602757 17.771537502062433 8.829999999999998 17.84 C 8.413037097156597 17.973359387621418 8.018593536659592 18.16889551162848 7.659999999999998 18.419999999999998 C 6.824968150355553 18.989427267930306 6.0449172184344935 19.635563876774786 5.329999999999993 20.35 C 4.594303789063106 21.06478898510074 3.909311350940971 21.82997565988108 3.2799999999999976 22.64 C 2.974228955937695 23.034031895096764 2.6904631204350435 23.44465775117707 2.4300000000000024 23.869999999999994 C 2.226432907408886 24.19940211288462 2.080983166934095 24.56133518801957 1.9999999999999996 24.940000000000005 L 1.21 24.130000000000003 L 80.14999999999999 24.740000000000002 L 159.01999999999998 25.740000000000002 L 238.31 26.96 Z M 318.31 27.93 L 239.60000000000002 27.44 L 160.38000000000002 27.16 L 80.76000000000002 26.62 L 1.2 25.74 L 0.34 25.74 L 0.41000000000000003 24.939999999999998 C 0.47766083080112026 24.266731226111396 0.7113071635164789 23.620767835663052 1.0899999999999994 23.06 C 1.3974998460273111 22.578617195576733 1.7313411582774718 22.11457777154901 2.089999999999998 21.67 C 2.7709891532459254 20.80792022385207 3.5093303864838745 19.992738047788443 4.299999999999997 19.229999999999997 C 5.076283659970828 18.440061136302038 5.926881302770748 17.726764687812338 6.839999999999992 17.1 C 7.35453061483465 16.742861739858906 7.925993645612407 16.475728133755695 8.529999999999998 16.310000000000002 C 9.196287911563147 16.17357593306615 9.886979047090648 16.218470856875438 10.53 16.44 C 11.57748991438215 16.834682973741646 12.58256257468562 17.333869061692365 13.529999999999998 17.929999999999993 C 14.3116510195315 18.440739340720114 15.209154945070207 18.746784740616455 16.14 18.82 L 22.52 18.82 C 24.64 18.82 26.759999999999998 18.82 28.869999999999997 18.75 C 30.979999999999997 18.68 33.129999999999995 18.57 35.269999999999996 18.6 C 39.53999999999999 18.6 43.769999999999996 18.78 48.01 18.73 C 56.489999999999995 18.490000000000002 65.00999999999999 18.580000000000002 73.50999999999999 18.67 C 81.9842122700337 18.88796165129064 90.46347459377768 18.533823823742644 98.8899999999999 17.610000000000028 C 107.32 16.750000000000004 115.57 14.730000000000004 123.93999999999998 13.160000000000004 C 132.30999999999997 11.590000000000003 140.64 10.13 149 8.84 C 153.19 8.17 157.38 7.5 161.5 6.57 C 165.62 5.640000000000001 169.74 4.49 173.89 3.5700000000000003 C 178.03999999999996 2.6500000000000004 182.25 1.73 186.45 1 C 190.66788071956438 0.25607655039533206 194.9477425693329 -0.0788109182876493 199.23 0 L 199.23 0 C 219.45999999999998 2.86 239.14999999999998 8.39 258.75 13.9 C 268.55 16.66 278.36 19.42 288.25 21.9 L 295.68 23.65 L 303.15000000000003 25.25 L 310.65000000000003 26.65 C 313.24 27 315.82 27.52 318.31 27.94 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 235.88 256.6)" id="Rpwx5XyJw8m_Z0qfsQXWS"  >
<linearGradient id="SVGID_8" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="146.1" y1="38.07" x2="146.1" y2="38.07">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity: 1"/>
<stop offset="49%" style="stop-color:rgb(96,96,96);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_8); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-146.09, -38.07)" d="M 277.18 38.07 L 15 38.07" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 235.88 256.52)" id="KnqDNiVRTvAfPKqVA9KM-"  >
<linearGradient id="SVGID_9" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="146.03" y1="34.28" x2="146.17" y2="41.86">
<stop offset="0%" style="stop-color:rgb(255,194,33);stop-opacity: 1"/>
<stop offset="18%" style="stop-color:rgb(254,194,36);stop-opacity: 1"/>
<stop offset="34%" style="stop-color:rgb(250,194,47);stop-opacity: 1"/>
<stop offset="48%" style="stop-color:rgb(244,195,65);stop-opacity: 1"/>
<stop offset="62%" style="stop-color:rgb(235,195,90);stop-opacity: 1"/>
<stop offset="76%" style="stop-color:rgb(224,196,122);stop-opacity: 1"/>
<stop offset="89%" style="stop-color:rgb(211,197,161);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_9); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-146.09, -37.99)" d="M 277.18 37.92 C 277.18 37.85 277.18 38.49 277.18 38.22 L 275 38.22 L 272.82 38.22 L 268.46999999999997 38.22 L 264.11999999999995 38.22 L 261.93999999999994 38.22 L 259.7699999999999 38.22 C 259.7699999999999 38.76 259.7699999999999 37.49 259.7699999999999 37.62 L 259.7699999999999 38.22 L 198.58999999999992 38.75 L 137.39999999999992 39.19 C 117.00999999999992 39.37 96.60999999999993 39.599999999999994 76.21999999999991 39.37 C 55.8299999999999 39.14 35.41 39 15 38.22 L 15 37.92 C 35.39 37.13 55.79 36.870000000000005 76.19 36.620000000000005 C 96.59 36.370000000000005 116.97999999999999 36.620000000000005 137.37 36.800000000000004 L 198.56 37.230000000000004 L 259.74 37.77 L 259.74 38.370000000000005 C 259.74 38.50000000000001 259.74 37.230000000000004 259.74 37.77 L 261.91 37.77 L 264.09000000000003 37.77 L 268.44000000000005 37.77 L 272.7900000000001 37.77 L 274.9700000000001 37.77 L 277.1400000000001 37.77 C 277.1400000000001 37.5 277.1400000000001 38.14 277.1400000000001 38.07 Z" stroke-linecap="round" />
</g>
<g transform="matrix(1 0 0 1 226.29 264.68)" id="1zIiSwz8fV-4fO4FPWADO"  >
<linearGradient id="SVGID_10" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 0 0)"  x1="136.45" y1="43.24" x2="136.56" y2="49.07">
<stop offset="0%" style="stop-color:rgb(253,194,74);stop-opacity: 1"/>
<stop offset="20%" style="stop-color:rgb(251,194,77);stop-opacity: 1"/>
<stop offset="38%" style="stop-color:rgb(247,194,88);stop-opacity: 1"/>
<stop offset="55.00000000000001%" style="stop-color:rgb(239,195,106);stop-opacity: 1"/>
<stop offset="71%" style="stop-color:rgb(228,196,131);stop-opacity: 1"/>
<stop offset="86%" style="stop-color:rgb(214,197,163);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(198,198,198);stop-opacity: 1"/>
</linearGradient>
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_10); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-136.51, -46.15)" d="M 246.51 46.26 L 136.51 46.96 C 118.16999999999999 47.06 99.83999999999999 47.29 81.50999999999999 47.160000000000004 C 63.17999999999999 47.03000000000001 44.83999999999999 46.830000000000005 26.50999999999999 46.260000000000005 L 26.50999999999999 46.06 C 44.83999999999999 45.480000000000004 63.17999999999999 45.34 81.50999999999999 45.160000000000004 C 99.83999999999999 44.980000000000004 118.17999999999999 45.25000000000001 136.51 45.36000000000001 L 246.51 46.06000000000001 Z" stroke-linecap="round" />
</g>
</svg>

现在这个额外的从vectr导入/导出的步骤工作正常，直到我尝试在图像上包含蒙版纹理并且这些根本不导入vectr，所以，我回来试图弄清楚为什么svg来自 Adob​​e Ilustrator 的文件不会在画布上呈现，如果我可以做些什么来让这些文件正常工作？

如果有人有这方面的经验，我将不胜感激。

【问题讨论】：

我猜你只需要将所需的宽度/高度添加到 Adob​​e 文件 (<svg width="500" height="500" ...)

难以置信，这些参数怎么会从 Adob​​e 文件中丢失，更重要的是，为什么它们会丢失？

向文件添加宽度和高度参数很有效，但并没有解决我在渲染图像中缺少纹理的问题，但我想这是另一个论坛的问题。

【参考方案1】：

好的！这里发生了一些事情，在graphic design forum on stackexchange 上与一些出色的人进行了一番讨论之后，我们有了这些问题的答案。

首先：

文件未在画布上呈现的原因是因为 @sphinxxx 指出的 svg 文件中缺少宽度和高度参数。

其次：

未渲染蒙版纹理（不透明蒙版）的原因是用于创建纹理的图像文件是链接的，而不是嵌入文件中。

为了防止这些问题的发生，我们需要在导出时做一些非常具体的事情。

选择“文件-->导出-->导出为-->另存为类型-->svg 确保取消选择“响应式”，这将确保宽度和高度参数包含在 svg 文件中。 （这样做的结果是，您需要将原始图稿制作得尽可能大，我们始终可以通过编程方式在画布上按比例缩小）文件现在将在画布上呈现。 为确保在画布上呈现不透明蒙版（应用于图像的纹理），请确保将“图像”选项设置为“嵌入”，如下所示：

非常感谢 @Billy Kerr 和 @Wolff 在这些问题上提供帮助。

希望这对其他人有所帮助。

鱼咬