将过滤器应用于svg中的路径

Question

我有一个用path绘制的三角形 我想对它应用过滤器：

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="gradA0" gradientUnits="userSpaceOnUse" x1="50.000000" y1="50.000000" x2="130.000000" y2="210.000000">
            <stop offset="0%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#000000"/>
        </linearGradient>

        <path id="pathA0" d="M 50.000000,50.000000 L 250.000000,150.000000 50.000000,250.000000 Z" fill="url(#gradA0)"/>

        <filter id="default0">
            <feImage xlink:href="#pathA0" result="layerA0" x="0" y="0"/>
        </filter>
    </defs>

    <path d="M 50.000000,50.000000 L 250.000000,150.000000 50.000000,250.000000 Z" filter="url(#default0)"/>
</svg>

结果： 为什么应用的图像被剪裁？如何解决？

Answer 1

您尚未调整SVG元素的大小。 SVG没有隐式的大小调整，如果你不提供它，那么浏览器可以自由地为你提供他们想要的任何大小。我认为Firefox是100px×100px ..

更新： 你也没有调整你的feImage（SVG不是很宽容）。这个版本有效：

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="800px" viewBox="0 0 1000 800">
    <defs>
        <linearGradient id="gradA0" gradientUnits="userSpaceOnUse" x1="50.000000" y1="50.000000" x2="130.000000" y2="210.000000">
            <stop offset="0%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#000000"/>
        </linearGradient>

        <path id="pathA0" d="M 50.000000,50.000000 L 250.000000,150.000000 50.000000,250.000000 Z" fill="url(#gradA0)"/>

        <filter id="default0">
            <feImage xlink:href="#pathA0" result="layerA0" x="0%" y="0%" width="100%" height="100%"/>
        </filter>
    </defs>

    <path d="M 50.000000,50.000000 L 250.000000,150.000000 50.000000,250.000000 Z" filter="url(#default0)"/>
</svg>