SVGで触れる形のグループの概要

Question

私がやる特定のスタイルについては、SVGの形のグループを概説したいと思います。グループに適用すると、strokeプロパティは個々の図形を個別にアウトライン化するように見えます。私の状況をより明確に説明するために、私はそれぞれ8x8ピクセルのタッチする長方形のグループを持っています。しかし、それらはより大きな矩形を形成しません。

簡潔にするために、それらが十字を形成するとしましょう。だから私は5つの矩形を持っています - 中央に1つ、もう片方にもう1つ。私はそれらをすべて1つの形のように概説したいと思います。この「十字」の形が変わったことを考えれば、それはもっと多くのコーディングが必要になるので、パスを使わない方がいいでしょう。このグループを単一のシェイプとして認識させるエフェクトフィルタを得ることはできませんか？

そうでなければ、このグループの黒いコピーを作成して、グループの背後に置くことができる幅と高さがちょうど2px大きいだけで黒いアウトラインを作成できますか？もしそうなら、グループを複製せずに可能でしょうか？

ありがとうございました。このよう

Answer 1

：

<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/クリック四角形上、それは黒と大きくなります。

あなたは、たとえば、このようなSVGフィルターを使用することができfeMerge

Answer 2

を使用して上に元の形状を置くためにフィルタを拡張することができ：

：

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