更改 SVG 形状的粗细答案

【问题标题】：Change the thickness of an SVG shape更改 SVG 形状的粗细
【发布时间】：2016-06-07 19: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>

提前致谢

【问题讨论】：

标签： html svg

【解决方案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>

【讨论】：

这个答案在技术上不使用 CSS。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：