svg - 响应式 SVG(调整大小后截断)
问题描述
我目前正在尝试实现一个使用 SVG 生成径向进度的 API。
这是我将父 div 的大小调整为较小时发生的示例。
任何人都可以提出一个解决方案来调整 SVG 相对于父容器的大小吗?
我尝试在 SVG 元素上使用 viewbox 属性,但结果不理想。
这是我的标记示例:
text {
text-anchor: middle;
font-weight: bolder;
font-family: 'Nunito', sans-serif;
}
.shadow {
-webkit-filter: drop-shadow(6px 6px 10px #000000cc);
filter: drop-shadow(6px 6px 10px #000000cc);
}
<div id="svg-container" class="containter" style="width: 180px;height:280px">
<svg id="svg" width="100%" height="100%" >
<defs>
<filter id="inset-drop-shadow">
<feFlood flood-color="#000000" />
<feComposite in2="SourceAlpha" operator="out" />
<feGaussianBlur stdDeviation="6" result="blur" />
<feComposite operator="atop" in2="SourceGraphic" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="138" stroke="#ccc" stroke-width="1" fill="#999" />
<circle cx="50%" cy="50%" r="135" stroke="#ccc" stroke-width="1" fill="#efefef" filter="url(#inset-drop-shadow)" />
<circle cx="50%" cy="50%" r="105" stroke="#ccc" stroke-width="1" fill="#fff" class="shadow" />
<text x="50%" y="40%" font-size="35" fill="#555">Value</text>
<text x="50%" y="60%" font-size="45" fill="#555">100.0<tspan>%</tspan></text>
<path x="50%" y="50%" id="arc1" fill="none" stroke="#0f0" stroke-width="27" filter="url(#inset-drop-shadow)" />
<path x="50%" y="50%" id="arc2" fill="none" stroke="#999" stroke-width="10">
<title>Target 80%</title>
</path>
</svg>
</div>
解决方案
视图框是这种情况下最简单的解决方案。否则,您必须将宽度和高度显式传递给 svg 并相应地计算所有坐标和大小
<div id="svg-container" class="containter" style="width: 180px;height:280px">
<svg id="svg" width="100%" height="100%" viewBox="0 0 280 280">
<defs>
<filter id="inset-drop-shadow">
<feFlood flood-color="#000000" />
<feComposite in2="SourceAlpha" operator="out" />
<feGaussianBlur stdDeviation="6" result="blur" />
<feComposite operator="atop" in2="SourceGraphic" />
</filter>
</defs>
<circle cx="50%" cy="50%" r="138" stroke="#ccc" stroke-width="1" fill="#999" />
<circle cx="50%" cy="50%" r="135" stroke="#ccc" stroke-width="1" fill="#efefef" filter="url(#inset-drop-shadow)" />
<circle cx="50%" cy="50%" r="105" stroke="#ccc" stroke-width="1" fill="#fff" class="shadow" />
<text x="50%" y="40%" font-size="35" fill="#555" text-anchor="middle">Value</text>
<text x="50%" y="60%" font-size="45" fill="#555" text-anchor="middle">100.0<tspan>%</tspan></text>
<path x="50%" y="50%" id="arc1" fill="none" stroke="#0f0" stroke-width="27" filter="url(#inset-drop-shadow)" />
<path x="50%" y="50%" id="arc2" fill="none" stroke="#999" stroke-width="10">
<title>Target 80%</title>
</path>
</svg>
</div>
推荐阅读
- c# - 为什么我无法获得与我的模型相关的所有数据?
- python - 使用 discord.py,我将如何检查用户在特定频道中发送了多少消息
- ruby-on-rails - 我们很抱歉,但有些不对劲。- Heroku 托管
- postgresql - 使用 NHibernate 映射复合键的问题(已添加列)
- python - LeetCode 的“迷宫 II”问题:为什么这个解决方案会超过时间限制?
- java - 响应 HTML 是重复行
- android - 具有交互性的 android 中的 3D 模型渲染
- json - 如何构建一个滑块,该滑块从 Laravel 中的 JSON 数据中获取图像的 url
- angular - 选择选项时如何动态添加表格行?
- python - 使用启用了 Cookie 的 Python 请求进行 Web 爬网