如何在1或2邊，矩形的頂部，底部，左側，右側添加邊框

美好的一天。如何在1或2邊，矩形的頂部，底部，左側，右側添加邊框

我不是新的JavaScript和CSS，但我也不善於使用SVG。

我一直在與這個問題鬥爭。

我想知道你能不能在一個矩形的一邊添加邊框。例如只是底部或左側。

我一直在搜索這些鏈接，但沒有多大幫助。

Stroke left and right side of rect svg

How to set a stroke-width:1 on only certain sides of SVG shapes?

謝謝你前進。

（」）

編輯：

我希望這將是更清楚的理解

<g id="fdtElem307Group" fdtUngroupable="fdtUngroupable" fdtSelectable="fdtSelectable" fdtType="cursiveNotes" fdtTypeFormat="Converted" fdtFormatOptions="1" fdtFormat="Cursive" fdtTabIndex="24" fdtFieldName="Notes18" fdtResizable="fdtResizable" fdtfont-size="12" fdtRows="4"> 
<rect id="fdtElem303" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="968" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="967" fdtActualX="113"></rect> 
<rect id="fdtElem304" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="992" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="991" fdtActualX="113"></rect> 
<rect id="fdtElem305" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="1016" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="1015" fdtActualX="113"></rect> 
<rect id="fdtElem306" fill="#ffffff" stroke="#000000" stroke-dasharray="5,2" stroke-width="1" x="114" y="1040" width="240" height="24" vector-effect="non-scaling-stroke" fdtSelectable="fdtSelectable" fdtActualHeight="25" fdtActualWidth="241" fdtActualY="1039" fdtActualX="113"></rect> 
</g>

來源

2015-09-07 Norris

行程如果你問簡單的邊框爲特定的側面，然後用'邊框寬度：0 0 1px的1px的; border-style：solid; border-color：＃000;'，'border-width'的序列就像* top * * right * * bottom * * left *。 – vivekkupadhyay

svg中沒有'border-width' @vivekkupadhyay – Akshay

那就是爲什麼我寫了*特定邊的簡單邊框* – vivekkupadhyay

您可以使用stroke-dasharray它有點黑客攻擊，但它會工作

左側行程 -

<svg width="500" height="500"> 
 
<rect x="10" y="10" fill="orange" width="200" height="100" stroke-dasharray = "100 1000" stroke = "black" stroke-width="5" stroke-dashoffset ="-500"/></svg> 
 
</svg>

在底部

<svg width="500" height="500"> 
 
<rect x="10" y="10" fill="orange" width="200" height="100" stroke-dasharray = "200 1000" stroke = "black" stroke-width="5" stroke-dashoffset ="-300"/></svg> 
 
</svg>

來源

2015-09-07 09:27:57 Akshay

我剛剛添加了一段代碼。我希望這會有所幫助。 – Norris

如何在1或2邊，矩形的頂部，底部，左側，右側添加邊框

回答

相關問題