应用过滤器路径SVG

我有path 我想一个过滤器适用于它画一个三角形：应用过滤器路径SVG

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

而结果：为什么施加图像被剪切？如何解决这个问题？

来源

2016-02-19 nikitablack

您尚未确定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>

来源

2016-02-19 16:02:29

哪些元素？顶级'svg'默认为100％。我试图在'filter'和'image'上设置'width'和'height'，但这没有效果。 – nikitablack

默认情况下，顶级SVG实际上不是100％ - 你需要明确地向它（或通过CSS）添加width =“100％”和height =“100％” –

无论如何不适用于我的示例。正如你所看到的第一个三角形呈现良好。问题在于第二个 - 看起来图像过滤器被裁剪。 – nikitablack

应用过滤器路径SVG

回答

相关问题