如何将SVG放入div中？

153

我有一个SVG，我试图以div为中心。 div的宽度为900px。 SVG的宽度为400px。 SVG的margin-left和margin-right设置为auto。不起作用，它就好像左边距为0（默认）。如何将SVG放入div中？

任何人都知道我的错误？

来源

2011-12-26 Don P

275

SVG默认为内联。将display: block添加到它，然后margin: auto将按预期工作。

来源

2011-12-27 00:01:47

很肯定这也意味着的text-align：父元素中心将工作太（我的作品中Chrome无论如何） – Nathan 2016-06-21 06:26:53

确保你的CSS写着：

margin: 0 auto;

即使你是说你有左，右设置为AUTO，你可能会放置一个错误。当然，我们不会知道，因为你没有向我们展示任何代码。

来源

2011-12-26 22:20:29

以上答案并不适用于我。虽然将属性preserveAspectRatio="xMidYMin"添加到<svg>标记中，但是却做到了这一点。需要指定viewBox属性才能使其工作。来源：Mozilla developer network

来源

2013-05-24 08:19:51 Esger

这些答案都不适合我。这是我做到的。

position: relative; 
left: 50%; 
-webkit-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
transform: translateX(-50%);

来源

2014-07-10 19:50:42 Ryan

我不知道为什么，但我不得不使用'left：100％' – 2014-11-12 21:50:47

是SVG上面看了默认是在线的，我只是添加了以下到div：

<div style="text-align:center;">

，它的伎俩我。

纯化者可能不喜欢它（它是一个图像，而不是文本），但在我看来HTML和CSS搞砸了，所以我认为这是合理的。

来源

2014-08-07 14:46:55 David

我不得不使用

display: inline-block;

来源

2017-01-26 08:30:36

回答上面看不完整的，因为它们是从只能查看CSS角度来讨论。 SVG的视口内

定位受两个SVG属性

视框：限定用于SVG以覆盖矩形区域。
preserveAspectRatio：定义放置viewBox wrt视口的位置以及在视口更改时如何放置viewBox wrt视口。

Follow this link from codepen for detailed description

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

来源

2017-07-07 05:39:25

这就是它。为我完美工作 – warunanc 2017-09-28 08:09:21

你也可以这样做：

<center> 
<div style="width: 40px; height: 40px;"> 
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64"> 
     <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"> 
      <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%"> 
       <path 
        d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z" 
        /> 
      </svg> 
     </use> 
    </svg> 
</div> 
</center>

来源

2018-02-21 14:38:04

谢谢马丁，工作就像一个神奇的咒语！ – 2018-03-04 19:55:01

如何将SVG放入div中？

回答

相关问题