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

标签 javascript html svg svg-filters

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

Here is a link to 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 位)

最佳答案

您定义的过滤器不适用于包含少于 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 。

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

If the filterUnits attribute isn't specified, then the effect is as if a value of objectBoundingBox were specified.

反过来，它是没有宽度的形状的 inapplicable:

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations

工作示例: 

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

关于javascript - SVG:在折线上应用过滤器会隐藏折线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50922991/

上一篇：html - 使用导航链接和版权信息实现 Bootstrap 4 Sticky Footer

下一篇：html - 如何阻止文本在过渡中移动？

相关文章：

javascript - 在 CSS 中使用参数或现有变量

html - 为 Bootstrap 面板分配最小宽度

forms - 我的 HTML5 表单显示内联且没有换行符

javascript - 如何从数组添加到 <SVG> 元素

php - ImageMagick 和 imagick_type_gen 无法识别添加的字体

javascript - 递归方法 - 每次调用时递增 a 值

javascript - JS onclick 触发错误的对象

javascript - JQuery 自动完成返回空白结果

javascript - 在对象数组中查找对象下落

javascript - 如何在用户将鼠标悬停在文本上时删除文本

©2024 IT工具网  联系我们