带有三角形/圆形末端的 Svg 矩形，用于进度条

Question

我正在开发一个基于 svg 的进度条，该进度条需要与下图匹配。我无法在右端实现三角形/圆形外观。我最初尝试使用路径并获得了我想要的形状，但是使用路径很难使其响应（高度和宽度需要轻松更改）。它还需要根据进度更改宽度，尽管这可以通过将整个路径/矩形向左移动并隐藏溢出来实现。

因此我想问是否有任何简单的方法可以使用简单的 svg 形状（如 rect）来实现这一点，因此它更易于使用且不依赖于复杂的路径字符串。

这里也可以使用html和css来实现这个形状。

作为参考，这是路径实现的外观（请注意，末端的三角形具有略微圆形的末端和边缘）

<svg width="432px" height="39px" viewBox="0 0 432 39">
    <path d="M0.0724087765,38.0710052 L0.0724087765,0.0965500345 C275.055657,0.053915002 413.031521,0.053915002 414,0.0965500345 C415.452719,0.160502583 431.378608,16.7041591 431.378608,19.0837776 C431.378608,21.4633961 415.356767,38.0112767 414,38.0710052 C413.095489,38.1108242 275.119625,38.1108242 0.0724087765,38.0710052 Z" fill="red"></path>
</svg>

图片示例

Answer 1

我会简化 SVG 以仅保留三角形部分，然后将其集成到背景中，您可以使用简单的渐变轻松为剩余部分着色：

.box {
 background:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 background-repeat:no-repeat;
 height:40px;
 margin:5px;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="width:50px;"></div>



<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width=40>
  <path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z'fill='green' />
</svg>

如果您想要渐变色，可以使用 SVG 作为遮罩：

.box {
 -webkit-mask:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 -webkit-mask-repeat:no-repeat;
 mask:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 mask-repeat:no-repeat;
 
 background:linear-gradient(blue,yellow);
 height:40px;
 margin:5px;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="width:50px;"></div>



<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width=40>
  <path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z'fill='green' />
</svg>

我使用了一个随机的 SVG 来说明，你可以随意改变它：