更改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>

提前致谢

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>

Answer 2

您可以使用 CSS调整stroke和：stroke-width

div svg path {
  stroke: #000000;
  stroke-width: 3px;
}

Answer 3

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

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