Question

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

它涉及将SVG元素包装在容器中，分配一些CSS值，添加viewBox和preserveAspectRatio属性。这似乎是执行响应式SVG元素的常用方法：

<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;
}

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

http://jsfiddle.net/g5WZj/5/

你可以看到我在这个例子中有两个SVG。第一个是没有出现的那个。第二个是我从第一个例子中生成的内容复制的内联静态SVG标记。很明显，这不是标记问题。

此外，这是一个使用svg.js的类似示例。相同的结果：

http://jsfiddle.net/3Luaw/5/

所以基本上，问题在于如果你在HTML中创建一个静态SVG元素，那么很容易让它响应。但是如果你试图动态创建一个SVG元素，那么它很难（或者不可能我不知道？）来使它响应。

我知道SVG DOM与普通的HTML DOM有所不同，因此在尝试动态更改时会出现意外结果。

我如何克服这个障碍？

Answer 1

当然，SVG DOM与普通的HTML DOM有所不同。所以你最好使用特殊用途的svg lib来处理它。使用SVG.js或two.js修改SVG节点，而不是jQuery。

如果您希望自己的应用与旧版本兼容，请启动您的工作，您也可以尝试Raphealjs。

Answer 2

在您的示例http://jsfiddle.net/g5WZj/5/中，您的＆＃34;动态＆＃34; svg没有显示是因为你还没有设置它的大小。如果你右键单击svg部分并检查svg元素，你会发现它在页面中计算出的布局大小是0x0。

您可以在＆lt; svg＆gt;上设置width和height属性。元素，或者您可以添加类似于css样式表的内容，例如svg { width: 500px; height 500px; }

改变动态生成的SVG以使其响应？

2 个答案: