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

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

---

这个答案在技术上没有使用CSS。 - gurtner

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

Answer 3

你可以使用CSS来调整stroke和stroke-width属性：

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

- gurtner