SVG feOffset 过滤器放大/缩放

SVG feOffset filter enlarge/scale

本文关键字：缩放 放大 过滤器 feOffset SVG      更新时间：2023-09-26

要在 svg 多边形或圆上有两个笔划和模糊，我创建了一个过滤器来做到这一点，尽管第二个"笔触"（使用过滤器创建）被剪裁或不像一个完美的圆。知道如何以正确的方式解决此问题吗？

<svg height="500" width="400">
  <defs>
    <filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%">
      <feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
      <feMorphology in="offset" result="offsetmorph" operator="dilate" radius="2"></feMorphology>
      <feFlood flood-color="white"></feFlood>
      <feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
      <feGaussianBlur stdDeviation="5" result="offsetblur"></feGaussianBlur>
      <feFlood flood-color="#4881D7"></feFlood>
      <feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
      <feMerge>
        <feMergeNode in="blur"></feMergeNode>
        <feMergeNode in="stroke"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <g transform="translate(50,50) scale(3)">
    <polygon points=" 22,0
                      44,10
                      44,34
                      22,44
                      0,34
                      0,10" fill="#e6a6d5" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></polygon>
  </g>
  <g transform="translate(50,250) scale(3)">
    <circle cx="22" cy="22" r="22" fill="#b6ccef" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></circle>
  </g>
</svg>

feMorphology在执行膨胀时使用方形搜索框，因此它将创建这些类型的剪切效果。扩展保留原始形状的形状的另一种方法是执行高斯模糊，然后使用 feComposite/feFuncA/table 将模糊区域转换为完全不透明的形状。这样： 

<svg height="500" width="400" color-interpolation-filters="sRGB">
  <defs>
<filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%" filterRes="1000">
  <feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
  
  <feGaussianBlur stdDeviation="2" />
  <feComponentTransfer result="offsetmorph">
    <feFuncA type="table" tableValues="0 .05 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
  </feComponentTransfer>
  <feFlood flood-color="white"></feFlood>
  <feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
  <feGaussianBlur stdDeviation="5" result="offsetblur"></feGaussianBlur>
  <feFlood flood-color="#4881D7"></feFlood>
  <feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
  <feMerge>
    <feMergeNode in="blur"></feMergeNode>
    <feMergeNode in="stroke"></feMergeNode>
    <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
</filter>
  </defs>
  <g transform="translate(50,50) scale(3)">
<polygon points=" 22,0
                  44,10
                  44,34
                  22,44
                  0,34
                  0,10" fill="#e6a6d5" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></polygon>
  </g>
  <g transform="translate(50,250) scale(3)">
<circle cx="22" cy="22" r="22" fill="#b6ccef" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></circle>
  </g>
</svg>

相关文章：