如何为SVG提供响应式设计？

Question

我是raphael的新手。我在div标签内写了svg标签。请参考这个示例http://jsfiddle.net/dhana36/bvs6P/1/

使用CTRL+和CTRL-，您会发现差异。

HTML：

<div class="outer">
<svg height="640" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 640" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative; left: -0.625px;" class="stretchBar">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
Created with Raphaël 2.1.0
</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
<path fill="none" stroke="#000000" d="M228,109L228,110Z" stroke-width="200px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>

</svg>
</div>

CSS：

.outer{

    width:30%;
    height:30%;
}

如何使用响应式布局实现SVG与内容的适配？

- dhana

---

不确定“响应式内容”是什么意思。请注意，viewBox="0 0 100% 640"是无效的，因为在viewBox中不允许使用百分比。 - Robert Longson

嘿，@Robert，viewBox有什么用？实际上我对SVG很新。 - dhana

那是另一个问题。 - Robert Longson

“那是另一个问题”是StackOverflow上典型的傲慢态度，这可能会让新用户感到不受欢迎。 - Kevin Nielsen

Answer 1

我认为这个问题并不值得被贬低，仅仅因为它没有以理解的角度表达，所以我会用赞成票来抵消这个贬低。

SVG元素在其定义的视口内本质上是响应式的（正如Robert指出的那样，必须绝对定义）。你所需要做的就是定义视口覆盖您想要处理的区域，提供填充该区域的内容，然后使SVG元素的宽度和高度相对于其父级div的大小（即按比例），SVG元素将自动缩放其内容以匹配。

这里是一个更复杂的SVG呈现响应式效果的示例：http://jsfiddle.net/kevindivdbyzero/qMSLs/1/

需要注意的相关项目是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">

您需要为容器元素（div.outer）和 SVG 元素本身指定 CSS 样式：

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

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

- Kevin Nielsen