从 adobe illustrator 导出的 svg 文件未在 HTML Canvas 上呈现
svg files exported from adobe illustrator aren't rendered on HTML Canvas
我目前正在使用 HTML5 Canvas API 进行一个项目，并希望包含 SVG 格式的图像，但是，我发现从 Adobe 导出的 SVG 文件Illustrator 不在 canvas 上渲染。我没有收到任何错误，只是图像没有出现。
这是用于演示目的的代码：
// 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);
}
这是 Adobe 导出的文件：
<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>
顺便说一下，它可以在浏览器中正常打开，但在 canvas 上却不行。我想知道是否有人知道这是为什么以及如何解决它。目前我发现如果我将文件导入 vectr.com 然后直接导出它们而不做任何 mods 它们渲染得很好。
这是执行上述操作后来自 Adobe 的相同图像文件：
<?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" width="500" height="500" 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 中，所以，我回来试图找出原因来自 Adobe Ilustrator 的 svg 文件无法在 canvas 上呈现，如果我可以做些什么来让这些文件正常工作？
如果有人对此有任何经验，我将不胜感激。
好的！这里发生了一些事情，在与一些很棒的人就 graphic design forum on stackexchange 进行了一些头脑碰撞之后，我们找到了这些问题的答案。
首先：
文件未在 canvas 上呈现的原因是因为 @sphinxxx 指出的 svg 文件中缺少宽度和高度参数。
其次：
未渲染蒙版纹理（不透明蒙版）的原因是用于创建纹理的图像文件是链接的，而不是嵌入文件中。
为了避免这些问题的发生，我们需要在导出的时候做的非常有针对性。
- 选择“文件-->导出-->导出为-->保存类型-->svg
- 确保取消选择“响应式”，这将确保宽度和高度参数包含在 svg 文件中。 （这样做的结果是，您需要将原始艺术品制作得尽可能大，我们始终可以通过编程方式缩小 canvas）文件现在将在 canvas.[= 上呈现36=]
- 为确保不透明遮罩（应用于图像的纹理）在 canvas 上呈现，请确保“图像”选项设置为“嵌入”，如下所示：
非常感谢@Billy Kerr 和@Wolff 在这些问题上的帮助。
希望这对这里的其他人有所帮助。
鱼咬
我目前正在使用 HTML5 Canvas API 进行一个项目，并希望包含 SVG 格式的图像，但是，我发现从 Adobe 导出的 SVG 文件Illustrator 不在 canvas 上渲染。我没有收到任何错误，只是图像没有出现。
这是用于演示目的的代码：
// 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);
}
这是 Adobe 导出的文件：
<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>
顺便说一下，它可以在浏览器中正常打开，但在 canvas 上却不行。我想知道是否有人知道这是为什么以及如何解决它。目前我发现如果我将文件导入 vectr.com 然后直接导出它们而不做任何 mods 它们渲染得很好。
这是执行上述操作后来自 Adobe 的相同图像文件：
<?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" width="500" height="500" 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 中，所以，我回来试图找出原因来自 Adobe Ilustrator 的 svg 文件无法在 canvas 上呈现，如果我可以做些什么来让这些文件正常工作？
如果有人对此有任何经验，我将不胜感激。
好的！这里发生了一些事情，在与一些很棒的人就 graphic design forum on stackexchange 进行了一些头脑碰撞之后，我们找到了这些问题的答案。
首先：
文件未在 canvas 上呈现的原因是因为 @sphinxxx 指出的 svg 文件中缺少宽度和高度参数。
其次：
未渲染蒙版纹理（不透明蒙版）的原因是用于创建纹理的图像文件是链接的，而不是嵌入文件中。
为了避免这些问题的发生，我们需要在导出的时候做的非常有针对性。
- 选择“文件-->导出-->导出为-->保存类型-->svg
- 确保取消选择“响应式”，这将确保宽度和高度参数包含在 svg 文件中。 （这样做的结果是，您需要将原始艺术品制作得尽可能大，我们始终可以通过编程方式缩小 canvas）文件现在将在 canvas.[= 上呈现36=]
- 为确保不透明遮罩（应用于图像的纹理）在 canvas 上呈现，请确保“图像”选项设置为“嵌入”，如下所示：
非常感谢@Billy Kerr 和@Wolff 在这些问题上的帮助。
希望这对这里的其他人有所帮助。
鱼咬