2

私が目指している特定のスタイルについて、SVGで図形のグループの輪郭を描きたいと思います。グループに適用すると、strokeプロパティは各形状の輪郭を個別に表示するように見えます。つまり、近くにある他の形状の上に効果的に配置されます。私の状況をより明確に説明するために：私はそれぞれ8x8ピクセルの接触する長方形のグループを持っています。ただし、これらは大きな長方形を形成しません。

簡単にするために、それらが十字を形成するとしましょう。だから私は5つの長方形を持っています-中央に1つ、その両側にもう1つ。まるで1つの形のように輪郭を描きたいと思います。この「クロス」形状が変化することを考えると、パスを使用しない方がよいでしょう。これは、より多くのコーディングが必要になるためです。エフェクトフィルターでこのグループを単一の形状として認識させる方法はありませんか？

そうでない場合は、少なくとも、幅と高さが正確に2ピクセル大きいこのグループの黒のコピーを作成して、グループの後ろに配置して黒一色の輪郭を作成することは可能ですか？もしそうなら、グループを複製せずにそれは可能ですか？

助けてくれてありがとう。

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 に答える