如何在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>

行程如果你问简单的边框为特定的侧面，然后用'边框宽度：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>

我刚刚添加了一段代码。我希望这会有所帮助。 – Norris

如何在1或2边，矩形的顶部，底部，左侧，右侧添加边框

相关推荐