时间戳

首页 > 解决方案 > SVG填充路径中心

html - SVG填充路径中心

问题描述

我有这个带有路径的 Svg：

    <svg width="29" height="29" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
    </svg>

我想拥有这个当前的变体，并且还能够用 css 对其进行修改以完全填充它；但我不能，即使有fill-rule: nonzero：

svg {
  fill: black;
  fill-rule: nonzero;
}
<svg width="29" height="29" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 28.3h28.3L14.2 0 0 28.3zm5.3-3.2l8.9-17.7L23 25.1H5.3z" />
</svg>

有什么办法吗？

如果路径有问题：我应该如何创建它才能完全用css填充它？

在这里，我添加了我从这里采取的另一条以这种方式工作的路径：

.path {
  stroke: #000000;
  fill: #6666ff;
}

.path1 {
  fill-rule: nonzero;
}

.path2{
  fill-rule: evenodd;
}
<svg>
  <path class="path path1" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
 />
</svg>

<svg>
  <path class="path path2" d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
 />
</svg>

谢谢！

标签： htmlcsssvg

解决方案

我认为问题出在路径上。尝试不同的演示，我能够按预期工作。尝试更改您的情况下的路径，看看是否有帮助。

<svg width="100%" height="80px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
 
  <path d="M 100 100 L 300 100 L 200 300 z" fill="black" />
 
   </svg>

推荐阅读