我有如下的 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 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>
最佳答案
显而易见的答案(除了将其加载回 Illustrator 并调整其大小 :) 是缩小两条路径并将它们移动到中心。
比例需要为 16/300 = 0.053。并将 16x16 的东西移动到 300x300 的中心 viewBox
,您需要将其移动到 (142,142)。
如果您希望 SVG 为 215x250,请使用 width
设置样式。和 height
.
最后,对于轮换,您可以使用 <animateTransform>
元素。
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>
关于html - SVG 的中心内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45590131/