如何为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响应内容？

Answer 1

我不相信这个问题应该得到它只是因为它没有从理解的角度来表达而得到的支持,所以我用一个upvote抵消了downvote.

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)的CSS样式和svg元素本身:

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

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