时间戳

首页 > 解决方案 > SVG feImage 过滤器剪辑中风 - 如何阻止它？

svg - SVG feImage 过滤器剪辑中风 - 如何阻止它？

问题描述

我正在尝试仅为SVG 中的路径笔划创建一个过滤器，但feImage不断被剪裁到我认为是边界框（请参见下面的代码中的绿色矩形作为边界框）。我尝试将filter'sx/y 和 width/height 设置为各种位置/尺寸，这似乎是普遍的建议，但没有任何效果。x/y 只是偏移feImage大于 100% 的宽度/高度没有影响。

我不会提前知道描边或填充是实心还是其他东西（比如linearGradient.

下面演示了我想要做什么 - 只需获取形状的笔触（无论大小或填充）并为所有现代浏览器应用过滤器。

注意：FF 甚至不显示左手feImage. Chrome 剪辑左侧和顶部。边缘夹住所有 4 个侧面。

<html>
  <body>
    <svg width="960" height="540" >
      <rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3"/>
      <svg name="BoundingBox1" class="rect" x="100" y="100" overflow="visible" fill="none" stroke="#00ff00"  stroke-width="1">
        <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
      </svg>
      <!-- BELOW IS MODIFIED "SPEECH" SHAPE. NEED A FILTER ON THE STROKE ONLY. -->
      <svg name="Speech-strokeonly" x="100" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            

          <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="strokeOnly" fill="none"/>
          
          <filter id="effs0sp9" color-interpolation-filters="sRGB" x="0" y="0">
            <feImage xlink:href="#strokeOnly"  />
          </filter>
          
        </defs>
        
        <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" filter="url(#effs0sp9)" overflow="visible" />
        <text y="160" stroke="black" stroke-width="0.2">this is the one that has undesirable clipping of</text>
        <text y="178" stroke="black" stroke-width="0.2">of stroke in Chrome/Edge. Doesn't appear at all in FF</text>
      </svg>
      <!-- BELOW IS ORIGINAL WITH BOTH FILL AND STROKE -->
      <svg name="BoundingBox2" x="400" y="100" overflow="visible" fill="none" stroke="green"  stroke-width="1">
        <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" />
      </svg>
      
      <svg name="Speech-original" x="400" y="100" overflow="visible" fill="blue" stroke="orange"  stroke-width="12">
        
        <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9"  />
        <text y="-22" stroke="black" stroke-width="0.2">this is the original one</text>
        <text y="-6" stroke="black" stroke-width="0.2">that I just want the stroke as feImage from</text>
      </svg>
    </svg>
  </body>
</html>

有没有办法只抓取一个形状的整个笔画并在过滤器中使用？

标签： svgsvg-filters

解决方案

推荐阅读