概述SVG的一組觸摸形狀

對於某些我想要的樣式，我想概述SVG中的一組形狀。應用於一個組，stroke屬性似乎輪廓分別形狀每個形狀 - 有效地在附近的其他形狀之上。爲了更清楚地解釋我的情況：我有一組8×8像素的矩形。但是，它們不會形成更大的矩形。概述SVG的一組觸摸形狀

爲了簡單起見，我們假設它們形成一個十字。所以我有5個矩形 - 中間是1個，另一個是另一個。我想把它們全部勾勒出來，就好像它們是1形狀一樣。鑑於這種「交叉」形狀的變化，我寧願不使用路徑，因爲這將需要更多的編碼。是否有任何方法可以讓效果過濾器將該組識別爲單個形狀？

如果沒有，是否至少可以製作這個組的黑色副本，它的寬度和高度正好大於2px，我可以將它放在組後面以創建純色的黑色輪廓？如果是這樣，是否有可能不重複該組？

謝謝你的幫助。

來源

2012-02-22 Ruffy

像這樣：

<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-22 11:45:47

femorphology正是我所需要的！謝謝 – Ruffy 2012-02-22 12:54:02

請在回答中加入代碼 – Lloeki 2014-03-14 13:59:16

把原來的形狀在上面你可以使用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-22 12:43:09

感謝您的回答;不得不把它給第一個雖然:) 雖然也有用，但^^ +1 – Ruffy 2012-02-22 12:55:06

謝謝，擴張過濾器爲我工作。 – Dibbeke 2012-05-30 21:24:04

概述SVG的一組觸摸形狀

回答

相關問題