Paper.js不显示从SVG导入的渐变的路径。
下面是一个示例 https://codepen.io/Husband/pen/LoomQo如您所见,显示了带有描边颜色red
的路径,并且隐藏了带有渐变的路径。
<canvas id="canvas" resize></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="593" viewBox="0 0 1440 593" id="svg" style="display: none">
<defs>
<linearGradient id="a" x1="3.463%" y1="53.239%" y2="53.239%">
<stop offset="0%" stop-color="#2CC2FE" stop-opacity="0"/>
<stop offset="49.904%" stop-color="#24C1FF"/>
<stop offset="100%" stop-color="#3AC6FE" stop-opacity="0"/>
</linearGradient>
</defs>
<g id="curves" fill="none" fill-rule="evenodd" stroke-width=".271">
<path stroke="url(#a)" d="M.51 345.572s130.835 62.466 339.31 62.466c208.473 0 264.545-82.37 527.654-82.37 263.108 0 317.742 179.132 671.43 179.132" transform="translate(-81 25)"/>
<path stroke="red" d="M.51 342.824s137.305 69.09 345.78 69.09c208.473 0 258.075-94.184 521.184-94.184 263.108 0 317.742 179.541 671.43 179.541" transform="translate(-81 25)"/>
</g>
</g>
</svg>
<script type="text/paperscript" canvas="canvas">
var item = project.importSVG(document.getElementById('svg'));
item.visible = true;
var group = item.children.curves;
item.fitBounds(view.bounds);
item.scale(2);
</script>
这是
由于当前 SVG 导入实现中的一个错误paper.js
该错误不遵循 SVG 规范(x2
默认值应为 100%
(。
我报告了这个问题,我会尽快修复它。
作为解决方法,您可以将x2
值设置为 100%
,这将按预期工作。
下面是演示解决方法的草图。
const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="593" viewBox="0 0 1440 593" id="svg" style="display: none">n' +
' <defs>n' +
' <linearGradient id="a" x1="3.463%" y1="53.239%" x2="100%" y2="53.239%">n' +
' <stop offset="0%" stop-color="#2CC2FE" stop-opacity="0"/>n' +
' <stop offset="49.904%" stop-color="#24C1FF"/>n' +
' <stop offset="100%" stop-color="#3AC6FE" stop-opacity="0"/>n' +
' </linearGradient>n' +
' </defs>n' +
' <g id="curves" fill="none" fill-rule="evenodd" stroke-width=".271">n' +
' <path stroke="url(#a)" d="M.51 345.572s130.835 62.466 339.31 62.466c208.473 0 264.545-82.37 527.654-82.37 263.108 0 317.742 179.132 671.43 179.132" transform="translate(-81 25)"/>n' +
' <path stroke="red" d="M.51 342.824s137.305 69.09 345.78 69.09c208.473 0 258.075-94.184 521.184-94.184 263.108 0 317.742 179.541 671.43 179.541" transform="translate(-81 25)"/>n' +
' </g>n' +
'</svg>';
var item = project.importSVG(svg);
item.visible = true;
var group = item.children.curves;
item.fitBounds(view.bounds);
item.scale(2);