时间戳

首页 > 解决方案 > SVG：在折线上应用过滤器隐藏折线

javascript - SVG：在折线上应用过滤器隐藏折线

问题描述

我正在尝试创建一个具有一组折线的 svg，折线的原始坐标是在其他地方计算的，它们是相对于其他坐标集的，这就是我使用 svg 的 viewBox 的原因。我正在尝试在折线上应用模糊过滤器，过滤器似乎隐藏了折线，尝试了几个过滤器，但没有任何效果。

这是 jsfiddle 的链接，您可以看到应用了过滤器的第一条折线是隐藏的，而另一条是显示的。

   <svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
     <filter id="blurMe2">
         <feGaussianBlur in="SourceGraphics" stdDeviation="5"/>
     </filter>
     <!--hidden-->
     <polyline points="1459,357 1459,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>
     <!--shown-->
     <polyline points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
     </svg>

浏览器：Chrome 版本 67.0.3396.87（官方构建）（64 位）

标签： javascripthtmlsvgsvg-filters

解决方案

您定义的过滤器不适用于包含少于 3 个点的折线（因为它们没有宽度）。
您可以通过使用 4 个点定义折线来解决此问题：

<polyline points="1459,357 1459,643 1470,357 1470,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>

工作示例：

<!DOCTYPE html>
<html>
<body style="background-color:red">

<svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
   <filter id="blurMe2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
   </filter>
    
        <polyline points="1459,357 1459,643 1470,357 1470,643" style="stroke:#FCF4DD;stroke-width:1" filter="url(#blurMe2)"></polyline>
        
        <polyline _ngcontent-c6="" points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
        <polyline _ngcontent-c6="" points="1456,372.4398955514718 1453,372.4398955514718" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,386.7243516013083 1447,386.7243516013083" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,401.00880765114476 1453,401.00880765114476" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,415.2932637009812 1447,415.2932637009812" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,429.57771975081766 1453,429.57771975081766" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,443.86217580065414 1447,443.86217580065414" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,458.1466318504906 1453,458.1466318504906" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,472.4310879003271 1447,472.4310879003271" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,486.7155439501636 1453,486.7155439501636" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,501 1447,501" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,515.2844560498365 1453,515.2844560498365" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,529.568912099673 1447,529.568912099673" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,543.8533681495094 1453,543.8533681495094" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,558.1378241993459 1447,558.1378241993459" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,572.4222802491823 1453,572.4222802491823" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,586.7067362990189 1447,586.7067362990189" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,600.9911923488553 1453,600.9911923488553" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,615.2756483986918 1447,615.2756483986918" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,629.5601044485283 1453,629.5601044485283" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,643.8445604983647 1447,643.8445604983647" style="stroke:#FCF4DD;stroke-width:1"></polyline>
  </svg>
</body>
</html>

不过，正如 Robert Longson 所提到的，一个合适的解决方案是userSpaceOnUse用作filterUnits。

为什么？因为真正的问题是

如果未指定 filterUnits 属性，则效果就像指定了 objectBoundingBox 的值一样。

反过来，这不适用于没有宽度的形状：

当适用元素的几何形状没有宽度或没有高度时（例如水平或垂直线的情况），即使当由于具有非零笔划宽度而查看时线条具有实际厚度时，也不应使用关键字 objectBoundingBox边界框计算忽略笔画宽度

工作示例： 

<!DOCTYPE html>
<html>
<body style="background-color:red">

<svg viewBox="1427 337.6554260253906 33 307" height="307" width="33" >
   <filter id="blurMe2" x="1427" y="337" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
   </filter>
    
        <polyline points="1459,357 1459,643" style="stroke:#FCF4DD;stroke-width:2" filter="url(#blurMe2)"></polyline>
    
        <polyline _ngcontent-c6="" points="1456,358.1554395016353 1447,358.1554395016353" style="stroke:#FCF4DD;stroke-width:1" ></polyline>
        <polyline _ngcontent-c6="" points="1456,372.4398955514718 1453,372.4398955514718" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,386.7243516013083 1447,386.7243516013083" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,401.00880765114476 1453,401.00880765114476" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,415.2932637009812 1447,415.2932637009812" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,429.57771975081766 1453,429.57771975081766" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,443.86217580065414 1447,443.86217580065414" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,458.1466318504906 1453,458.1466318504906" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,472.4310879003271 1447,472.4310879003271" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,486.7155439501636 1453,486.7155439501636" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,501 1447,501" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,515.2844560498365 1453,515.2844560498365" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,529.568912099673 1447,529.568912099673" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,543.8533681495094 1453,543.8533681495094" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,558.1378241993459 1447,558.1378241993459" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,572.4222802491823 1453,572.4222802491823" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,586.7067362990189 1447,586.7067362990189" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,600.9911923488553 1453,600.9911923488553" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,615.2756483986918 1447,615.2756483986918" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,629.5601044485283 1453,629.5601044485283" style="stroke:#FCF4DD;stroke-width:1"></polyline>
        <polyline _ngcontent-c6="" points="1456,643.8445604983647 1447,643.8445604983647" style="stroke:#FCF4DD;stroke-width:1"></polyline>
  </svg>
</body>
</html>

推荐阅读