带有矩形/圆形端的SVG矩形，用于进度条

Question

我正在基于SVG的进度条上工作，需要与下面的图像匹配。我在实现右端的三角形/圆形外观时遇到麻烦。我最初使用path尝试了此操作，并得到了想要的形状，但是使用path很难使其具有响应性（高度和宽度需要轻松更改）。它也需要根据进度更改宽度，尽管可以通过将整个路径/ rect向左移动并隐藏溢出来实现。

因此，我想问一下是否有任何简单的方法可以使用像rect这样的简单svg形状来实现这一目标，因此使用起来更容易，而且不依赖复杂的路径字符串。

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进行说明，可以随时使用自己的SVG进行更改：