如何製作帶有邊框的SVG「行」？

我有一個小svg部件，其目的是顯示一個角度列表（見圖片）。如何製作帶有邊框的SVG「行」？

現在，角度是線元素，它只有一個筆畫，沒有填充。但是現在我想在它周圍有一個「內部填充」顏色和一個「中風/邊框」。我猜行元素不能處理這個，所以我應該使用什麼呢？

請注意，該行的筆劃的行尾是四捨五入的。我想在解決方案中保持這種效果。

Angle Line

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
    <g> 
     <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/> 
     <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/> 
     <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/> 
    </g> 
    <g class="lsNorthAngleHandsContainer"> 
     <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/> 
     <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)"> 
     348 
     </text> 
    </g> 
    </g> 
</svg>

來源

2012-01-13 Tony R

添加第二行，用相同的座標，但較細的線寬度：

<g class="lsNorthAngleHandsContainer"> 
    <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/> 
    <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>

來源

2012-01-13 03:34:36 Janne

它看起來像你的線是不透明的，所以你可以只畫上與「外」色彩較粗的線的上方的「內部」顏色的細線。

來源

2012-01-13 03:14:40 Gabe

謝謝，這是一個好主意。但是，如何確保「頂部」線完全居中在「底部」線的中心？ – 2012-01-13 03:17:41

只需使用較窄線寬的相同座標即可。圓形的帽子看起來是正確的。 – Janne 2012-01-13 03:31:35

啊，現在我想起來了，我相信你是對的！謝謝Janne。 – 2012-01-13 03:33:12

你可以使用一個帶圓角的矩形，但數學修改了一下：

<rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02" y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/>

http://jsfiddle.net/RNAuP/

來源

2012-01-13 03:37:35 Duopixel

這就是我最初認爲的解決方案。但是，你的看起來並不像Janne那麼好。矩形的起點和終點在圓的中心和圓形輪廓上沒有完美排列。 – 2012-01-13 03:41:56

如果你能夠正確地排列這個解決方案，這個解決方案似乎更容易操作（比如說，如果我想動態地添加/刪除輪廓，我會這麼做）。所以，由於不同的原因，這變得很笨重......你必須使用矩形的每個「短邊」的中點。 – 2012-01-13 03:43:40

這是一個算術問題，你必須從旋轉中心http://jsfiddle.net/F5e74/減去邊界寬度，我坦率地認爲兩條線是一個更簡單的解決方案。 – Duopixel 2012-01-13 03:49:34

你也可以用一條路徑來做到這一點，儘管它圍繞着一些比特很棘手：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable. 
     Obvisouly, if you're generating the path you can use the same variables in code to append to d --> 
    <!ENTITY handFill "0.01"> 
    <!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered --> 
    <!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill --> 
]> 
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg"> 
    <g> 
    <g> 
     <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/> 
     <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/> 
     <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/> 
    </g> 
    <g class="lsNorthAngleHandsContainer"> 
     <path d=" 
     M -&handFill;,0 l0,-0.4 
     a &handFill;,&handFill; 0 0,1 &handFill2;,0 
     l 0,0.4 
     a &handFill;,&handFill; 0 0,1 -&handFill2;,0 
     " stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" /> 
     <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)"> 
     348 
     </text> 
    </g> 
    </g> 
</svg>

來源

2015-07-08 11:35:22 TWiStErRob

我發現優雅的解決方案靈感來自illustration W3C文章約filling and stroking。基本上，你移動路徑定義和使用這個定義繪製兩個元素：

<svg width="200" height="200" viewBox="0 0 100 100"> 
    <defs> 
     <line id="line1" x1="25" x2="75" y1="25" y2="75"/> 
    </defs> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use> 
</svg>

通過使用<defs>和<use>，你只能改變路徑元更新兩條線。 JSFiddle演示

來源

2015-12-03 12:37:32 kirschpirogge

如何製作帶有邊框的SVG「行」？

回答

相關問題