html - 带有三角形/圆形末端的 Svg 矩形,用于进度条
问题描述
我正在开发一个基于 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>
图片示例
解决方案
我会简化 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 来说明,您可以随意更改它:
推荐阅读
- macos - 如何在 Mac 终端中创建别名?
- flutter - 图像无法使用 WP REST API 在 Flutter App 上加载 Wordpress Post & Display
- cmake - set(CMAKE_CXX_COMPILER g++) 添加子目录时出错
- javascript - 如何覆盖owl Odoo 14中的现有组件/每次在Odoo 14中查看时触发点击功能
- android - 类型不匹配:推断类型是 HomeViewModel!但是视图模型!预计
- curl - 使用 CURL 的 Websocket 连接
- node.js - React 源代码更改未反映在浏览器 DOM 中
- r - R:提取具有NA的行,删除那些满足条件A并取那些满足条件B的平均值
- wordpress - 在 WordPress 博客上添加可选择的阅读障碍字体
- gitlab - 如何为 gitlab 重用 gitlab-ci.yaml 文件中的命令列表?