如何在矩形的1或2边，顶部，底部，左侧，右侧添加边框[重复]答案

【问题标题】：How to add a border on 1 or 2 sides, top, bottom, left, right of a rectangle [duplicate]如何在矩形的1或2边，顶部，底部，左侧，右侧添加边框[重复]
【发布时间】：2015-09-07 09:19:21
【问题描述】：

美好的一天。

我不是 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>

【问题讨论】：

如果您要求特定边的简单边框，请使用border-width: 0 0 1px 1px; border-style: solid; border-color: #000;，其中border-width 序列类似于top right 底部左.
在 svg @vivekkupadhyay 中没有 border-width
这就是我写特定边的简单边框的原因

标签： javascript css svg

【解决方案1】：

您可以使用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>

【讨论】：

我刚刚添加了一段代码。我希望这会有所帮助。
聪明的把戏，但可能不是最好的响应能力。
@MarsAndBack 对此不确定，但可以通过设置适当的视图框来实现响应。