将带有渐变笔划的SVG导入paper.js项目

问题描述

Paper.js不会显示从SVG导入的带有渐变的路径.

Paper.js don't show path with gradient imported from SVG.

以下是示例 https://codepen.io/Husband/pen/LoomQo 如您所见，显示了具有笔划颜色 red 的路径，并且隐藏了具有渐变的路径.

Here is an example https://codepen.io/Husband/pen/LoomQoAs you can see a path with stroke color red is displayed, and path with a gradient is hidden.

<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>

推荐答案

这是由于 paper.js 当前的SVG导入实现中存在一个错误，该错误未遵循SVG规范( x2的默认值应为 100％).
我报告了问题，我会尽快修复.

This is due to a bug in paper.js current SVG import implementation which doesn't follow SVG spec (x2 default value should be 100%).
I reported the issue and I will fix it soon.

作为一种解决方法，您可以将 x2 的值设置为 100％，这样可以正常工作.
这里是一个展示了解决方法.

As a workaround, you can set x2 value to 100% and this will work as expected.
Here is a sketch demonstrating the workaround.

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);

这篇关于将带有渐变笔划的SVG导入paper.js项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！