Html 如何为svg提供响应性设计？

我是拉斐尔的新手。我在div中写了svg标签。请看这个示例

使用CTRL+和CTRL-键，您会发现两者的区别

HTML:

---

如何用内容实现svg响应？

我不认为这个问题值得否决，因为它不是从理解的角度来表达的，所以我要用否决来抵消否决

SVG元素在其定义的viewbox中具有本质上的响应性（正如Robert指出的，必须绝对定义viewbox）。您所需要做的就是在您想要使用的区域上定义viewbox，提供填充该区域的内容，然后使svg元素的宽度和高度相对于其父div的大小（即成比例），svg元素将自动缩放其内容以匹配

下面是一个更复杂的SVG以响应方式运行的示例：

需要注意的相关项目是svg定义

<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.5px;" class="stretchBar">

---

不确定“内容响应”是什么意思。请注意，viewBox=“0 100%640”无效，因为viewBox中不允许使用百分比。嘿@Robert viewBox的用途是什么。事实上，我是SVG新手。这是另一个问题。“这是另一个问题”是一种陈规定型的StackOverflow势利感，可能会让新用户/不熟悉的用户非常不欢迎它。

.outer{

    width:30%;
    height:30%;
}

<svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.5px;" class="stretchBar">

.outer{    
    width:50%;
    height:50%;
}

.adaptive-svg {
    width: 100%;
    min-width: 250px;
    height: auto;
}