2

对于我想要的某种风格，我想在 SVG 中勾勒出一组形状。应用于组时，该stroke属性似乎单独勾勒出每个形状 - 有效地叠加在附近的其他形状之上。为了更清楚地解释我的情况：我有一组触摸矩形，每个矩形为 8x8 像素。但是，它们不会形成更大的矩形。

为简单起见，假设它们形成一个十字架。所以我有 5 个矩形——1 个在中心，另外一个在那个矩形的每一侧。我想将它们全部勾勒出来，就好像它们是 1 个形状一样。鉴于这种“十字”形状发生了变化，我宁愿不使用路径，因为这需要更多的编码。有没有什么办法可以让效果过滤器将该组识别为单个形状？

如果没有，是否至少可以制作一个宽度和高度正好大 2px 的该组的黑色副本，以便我可以将其放置在该组后面以创建一个纯黑色轮廓？如果是这样，是否可以不复制组？

感谢您的任何帮助。

4

2 回答 2

17

例如，您可以使用像这样的 svg 过滤器：

<filter id="outline">
  <feMorphology operator="dilate" in="SourceAlpha" radius="1"/>
  <feComposite in="SourceGraphic"/>
</filter>

像这样使用过滤器：

<g filter="url(#outline)">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <line x1="20" y1="10" x2="80" y2="15" stroke="lime"/>
</g>

根据您的内容的外观，另一种可能有效的替代方法是这样的：

<use xlink:href="#g" stroke-width="10" stroke="black"/>
<g id="g">
  <circle fill="lime" cx="20" cy="10" r="5"/>
  <rect x="40" y="10" width="100" height="10" fill="lime"/>
  <circle fill="lime" cx="140" cy="10" r="5"/>
  <circle fill="lime" cx="120" cy="10" r="5"/>
</g>
于 2012-02-22T12:43:09.820 回答
3

像这样：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="biggerbwcopy">
          <feColorMatrix values="0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 0 0
                                 0 0 0 1 0"/>
          <feMorphology operator="dilate" radius="2"/>
        </filter>
    </defs>
    <rect id="r" x="10" y="10" width="20" height="20" fill="blue" onclick="biggerbw()"/>
    <script>

      function biggerbw() {
        document.getElementById("r").style.filter="url(#biggerbwcopy)";
      }
    </script>
</svg>

http://jsfiddle.net/longsonr/LrDHT/1/点击矩形，它会变黑变大。

您可以使用 feMerge 扩展过滤器以将原始形状放在顶部

于 2012-02-22T11:45:47.763 回答