更改 SVG 形状的粗细

Question

我对 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>

提前致谢

原文由 Mojtaba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Joseph Marikle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

stroke 应该是背景颜色和 stroke-width 1 和 2 之间

 svg path {
      stroke: #ffffff; /* Background color against your svg */
      stroke-width: 1px; /*Between 1px and 2px*/
    }

原文由 Franco.js 发布，翻译遵循 CC BY-SA 4.0 许可协议