更改SVG形状的粗细
更改SVG形状的粗细
提问于 2016-06-08 03:08:16
我对svg绘图还不够熟悉。
我有一个SVG格式的箭头。如何增加箭头的粗细？
<div style="width: 100px; height:100px;">
<svg viewBox="0 0 100 100">
<path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
</svg>
</div>
提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-08 03:27:15
可以使用stroke="black" stroke-width="10"添加笔划，然后相应地调整viewBox。
OLD:
<div style="width: 100px; height:100px;">
<svg viewBox="0 0 100 100">
<path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
</svg>
</div>
<br>
NEW:
<div style="width: 100px; height:100px;">
<svg viewBox="-10 -10 120 120">
<path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)" stroke="black" stroke-width="10"></path>
</svg>
</div>
Stack Overflow用户
发布于 2021-04-13 21:51:02
stroke应为背景色，stroke-width应介于1和2之间
svg path {
stroke: #ffffff; /* Background color against your svg */
stroke-width: 1px; /*Between 1px and 2px*/
}Stack Overflow用户
发布于 2021-04-07 12:29:51
您可以使用CSS调整stroke和stroke-width：
div svg path {
stroke: #000000;
stroke-width: 3px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37687427
复制相关文章
相似问题
腾讯云开发者
