如何为svg提供响应式设计？ [英] How to provide responsive design for svg?

问题描述

我是拉斐尔的新人。我在div里面写了svg标签。请参阅此示例 http://jsfiddle.net/dhana36/bvs6P/1/ p>

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

HTML：

 < div class =outer> 
< svg height =640version =1.1width =100％xmlns =http://www.w3.org/2000/svgviewBox =0 0 100％640preserveAspectRatio =xMinYMinstyle =overflow：hidden; position：relative; left：-0.625px; class =stretchBar> 
< desc style = -  webkit-tap-highlight-color：rgba（0，0，0，0）;> 
 Created withRaphaël2.1.0 
< / desc>< defs style = -  webkit-tap-highlight-color：rgba（0，0，0，0）;> / defs> 
< path fill =nonestroke =＃000000d =M228,109L228,110Zstroke-width =200pxstyle =webkit-tap-highlight-color：rgba 0，0，0）;>< / path> 
 
< / svg> 
< / div> 
  

css：

 code> .outer {
 
 width：30％; 
 height：30％; 
} 
  

如何实现svg响应内容？

解决方案

我不相信这个问题应该得到它收到的downvote只是因为它不是从理解的角度，所以我反对downvote与upvote。

SVG元素在其定义的viewbox内是固有响应的（正如Robert指出的那样，它必须绝对定义）。所有你需要做的是在要处理的区域上定义viewbox，提供填充该区域的内容，然后使svg元素的宽度和高度相对于其父div的大小（即按比例） ，并且SVG元素将自动缩放其内容以匹配。

这是一个更复杂的SVG以响应方式行为的示例：http://jsfiddle.net/kevindivdbyzero/qMSLs/1/

相关项目注意是svg定义

 < svg version =1.1width =100％xmlns =http： /www.w3.org/2000/svgviewBox =0 0 600 600preserveAspectRatio =xMinYMinstyle =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; 
} 
  




I am new to raphael. I wrote svg tag inside div. Please see this sample http://jsfiddle.net/dhana36/bvs6P/1/

Use the CTRL+ and CTRL- and you will find the difference.

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

How to implement svg responsive with content ?

解决方案

I don't believe this question deserves the downvote it received simply because it wasn't phrased from a perspective of understanding, so I am counteracting the downvote with an upvote.

SVG elements are intrinsically responsive within their defined viewbox (which, as Robert pointed out, must be defined absolutely). All you need to do is to define the viewbox over the area you want to work with, provide content that fills that area, and then make the width and height of the svg element relative to the size of its parent div (i.e., proportionally), and the SVG element will automatically scale its content to match.

Here is an example of a more sophisticated SVG behaving in a responsive fashion: http://jsfiddle.net/kevindivdbyzero/qMSLs/1/

The relevant items to notice are the svg definition

<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">

and the CSS style for your container element (div.outer) and the svg element itself:

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

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

这篇关于如何为svg提供响应式设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！