SVG的中心内容 [英] Center content of SVG

问题描述

我有以下这样的SVG。现在，圆圈占据了SVG的整个大小。如何使它看起来像这样：SVG具有一定的尺寸（例如215x250），并且圆应在svg中心的尺寸为16。动画化此居中圆也将非常有用，因此它看起来像是一个加载微调器。

 < svg version = 1.1 id = Ebene_1 xmlns = http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xlink x = 0px y = 0px 
 viewBox = 0 0 300 300 style = enable-background：new 0 0 300300; xml：space = preserve> 
< style type = text / css> 
 .st0 {fill：＃292929;} 
 .st1 {fill：＃D5D5D5;} 
< / style> 
< path class = st0 d = M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34 .7,54 
 C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z /> 
< path class = st1 d = M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z /> 
< / svg> 
  

解决方案

显而易见的答案（除了将其加载回Illustrator并调整大小：）是将两条路径缩小并移至

比例尺必须为16/300 = 0.053。要将16x16的内容移动到300x300 viewBox 的中心，您需要将其移动到（142,142）。

如果您希望SVG为215x250，则使用宽度和高度设置样式。

最后，对于旋转，您可以仅使用< animateTransform> 元素。

  svg {宽度：215px;高度：250像素；边框：蓝色的1像素实线；}  

 < svg version =  1.1 id = Ebene_1 xmlns = http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xlink viewBox = 0 0 300 300英寸> < style type = text / css> .st0 {fill：＃292929;} .st1 {fill：＃D5D5D5;}< / style> < g transform = translate（142,142）scale（0.053）> < path class = st0 d = M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54 C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z < path class = st1 d = M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z /> < animateTransform attributeName = transform type = rotate从= 0 150 150变为= 360 150 150 dur = 1s repeatDur =不确定 additive = sum /> < / g>< / svg>  

I have such SVG as below. Right now the circle takes the whole size of SVG. How can I make it look like this: the SVG has a certain size (let's say 215x250) and the circle should be of size 16 in the center of svg. Would be also great to animate this centered circle so it looks like a loading spinner.

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#292929;}
    .st1{fill:#D5D5D5;}
</style>
<path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54
    C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/>
<path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/>
</svg>

JSFiddle

This is what I am trying to achieve:

解决方案

Well the obvious answer (other than loading it back into Illustrator and resizing it :) is to scale the two paths down and move them to the centre.

The scale would need to be 16/300 = 0.053. And to move something that is 16x16 to the centre of a 300x300 viewBox, you would need to move it to (142,142).

If you want the SVG to be 215x250, then style it with that width and height.

Finally, for the rotation, you can just use an <animateTransform> element.

svg {
  width: 215px;
  height: 250px;
  border: blue 1px solid;
}

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 300 300">
  <style type="text/css">
  	.st0{fill:#292929;}
  	.st1{fill:#D5D5D5;}
  </style>
  <g transform="translate(142,142) scale(0.053)">
    <path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54
	C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/>
    <path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/>
    <animateTransform attributeName="transform" type="rotate"
                      from="0 150 150" to="360 150 150"
                      dur="1s" repeatDur="indefinite" additive="sum"/>
  </g>
</svg>

这篇关于SVG的中心内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！