Javascript 更改动态生成的SVG以使其具有响应性？

我正在尝试使用一个SVG库，比如Two.js或SVG.js，并（动态地）更改它们动态生成的SVG元素，以使它们具有响应性。这里我有一个基本的例子，展示了预定义的内联SVG是如何响应的

它涉及到将SVG元素包装在容器中，分配一些CSS值，添加

viewBox

和

preserveSpectratio

属性。这似乎是执行响应SVG元素的常用方法：

.svg容器{
显示：内联块；
位置：相对位置；
宽度：100%；
轮廓：1px纯红；
垫底：100%；
垂直对齐：中间对齐；
溢出：隐藏；
}
.svg内容{
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
.集装箱{
最大宽度：400px；
}

但是，当我使用Two.js动态生成一个SVG元素，然后尝试使用jQuery编辑DOM并使SVG元素具有响应性（类似于上面的示例）时，SVG元素不再可见：

您可以看到，在该示例中，我有两个SVG。第一个是没有出现的。第二个是内联的静态SVG标记，我从第一个示例中生成的内容复制了它。所以很明显，问题不在于标记

此外，这里还有一个使用svg.js的类似示例。同样的结果：

因此，基本上，问题在于，如果在HTML中创建静态SVG元素，那么很容易使其响应。但如果您尝试动态创建SVG元素，则很难（或者不可能）使其响应

我知道svgdom与普通的htmldom有点不同，因此在尝试对其进行动态更改时可能会出现意外的结果

---

如何克服这个障碍？

当然，SVG DOM与普通HTML DOM有点不同。因此，您最好使用专用svg库来处理这个问题。使用SVG.js或two.js修改SVG节点，而不是jQuery

如果你想让你的应用程序与旧的B兼容，那么你也可以试试。

在你的例子中，你的“动态”svg没有显示的原因是你没有设置它的大小。如果右键单击svg部分并检查svg元素，您将发现页面中计算的布局大小为0x0

您可以在元素上设置

width

和

height

属性，也可以添加类似于css样式表的内容，例如

svg{width:500px；height 500px；}

<div class='container'>
    <div class='svg-container'>
        <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content">
            <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="250" r="200" opacity="1" />
        </svg>
    </div>
</div>

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    outline: 1px solid red;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.container {
    max-width: 400px;
}