如何为 svg 提供响应式设计？答案

【问题标题】：How to provide responsive design for svg?如何为 svg 提供响应式设计？
【发布时间】：2013-09-13 23:00:44
【问题描述】：

我是拉斐尔的新手。我在 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 响应式内容？

【问题讨论】：

不确定“内容响应”是什么意思。请注意，viewBox="0 0 100% 640" 无效，因为 viewBox 中不允许使用百分比。
嘿@Robert viewBox 有什么用。实际上我是 SVG 新手。
那是另一个问题。
“那是另一个问题”是一种陈规定型的 StackOverflow 傲慢，可能使它对新/不熟悉的用户如此不受欢迎。

标签： html css svg raphael

【解决方案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;
}

【讨论】：