4

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

4

1 回答 1

12

我不认为这个问题值得仅仅因为它不是从理解的角度来表达，所以它应该得到反对票，所以我用赞成票来抵消反对票。

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;
}
于 2013-09-10T18:57:46.583 回答