SVV中的水平中心svg路径包含到div容器中

你能帮我理解为什么我的路径拒绝水平居中到SVG容器或div中。SVV中的水平中心svg路径包含到div容器中

好吧，如果我尝试水平对齐只是没有rect的路径svg我可以做到这一点，如果svg容器是100％的宽度。但是，如果我想添加矩形，只是工作到div宽度和高度静态，我从来没有找到路径中心的解决方案。

HTML：

<div id="svg-container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1200"> 

     <rect id="background" width="100%" height="100%" fill="grey"/> 

     <path id="path" xmlns="http://www.w3.org/2000/svg" 
       d="M 201.68015,653.12212 C 189.21313,655.67886 177.65942,662.51955 166.63177,673.41648 C 155.59034,684.51344 91 L 310.26302 176.06855,451.96604 z etc................ " 
       style="fill:#131516;fill-rule:evenodd;stroke:#131516;stroke-width:0.60229105" /> 

    </svg> 
</div>

和CSS：

#svg-container 
{ 
    height: 250px; 
    width: 250px; 
} 
#path 
{ 
    display: block; 
    position: relative; 
    left: 30%; 
}

的jsfiddle：https://jsfiddle.net/170jkfLr/2/#&togetherjs=w9w2vhjhEJ

来源

2016-09-25 darkomen

大概COS它遵循c坐标在路径数据中。您可以考虑[转换坐标]（https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace）或[嵌套]（http://stackoverflow.com/a/16890342/5496966）。 – AA2992

另一个主角[SVG定位]（http://stackoverflow.com/q/479591/5496966） – AA2992

做到这一点，例如（Twitter图标到中旬）：

<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:31:35

SVV中的水平中心svg路径包含到div容器中

回答

相关问题