如何通过CSS更改SVG的大小
如何通过CSS更改SVG的大小
提问于 2020-09-30 18:43:47
我想自定义我的圆圈svg的大小，但是，当我将字体大小设置为300 to时，svg的大小不会更改/更新。如何通过css更改svg的大小？谢谢。
svg {
font-size: 300px;
}
svg > circle {
fill: red;
}
svg > path {
fill: orange;
}<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
<path d="M0,50 a1,1 0 0,0 100,0" />
</svg>
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-09-30 19:04:25
这里有一种方法:在SVG上设置viewBox属性，这样它就可以扩展到它的容器中。然后在em's中设置容器的宽度，这意味着它将与您在容器上设置的字体大小进行缩放。
svg>circle {
fill: red;
}
svg>path {
fill: orange;
}
.svg-container {
font-size: 300px;
width: 4em;
border: solid 1px red;
}
.alpha {
font-size: 10px;
}
.beta {
font-size: 20px;
}
.gamma {
font-size: 100px;
}<div class="svg-container alpha">
10px
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<path d="M0,50 a1,1 0 0,0 100,0" />
</svg>
</div>
<div class="svg-container beta">
20px
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<path d="M0,50 a1,1 0 0,0 100,0" />
</svg>
</div>
<div class="svg-container gamma">
100px
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<path d="M0,50 a1,1 0 0,0 100,0" />
</svg>
</div>
Stack Overflow用户
发布于 2020-09-30 18:59:20
您希望使用scale命令。从CanIUse.com来看，除了IE11之外，其他地方都是如此。
svg {
transform-origin: left top;
transform: scale(3);
}
svg > circle {
fill: red;
}
svg > path {
fill: orange;
}<svg width="100" height="100">
<circle cx="50" cy="50" r="50"/>
<path d="M0,50 a1,1 0 0,0 100,0" />
</svg>
Stack Overflow用户
发布于 2020-09-30 19:38:48
我希望这个密码能帮到你。
svg {
width: 300px;
height: 300px
}
#semi-circle1 {
fill: red;
}
#semi-circle2 {
fill: orange;
}<svg>
<defs>
<clipPath id="cut-off-top">
<rect x="0%" y="0%" width="100%" height="100%"/>
</clipPath>
<clipPath id="cut-off-bottom">
<rect x="0%" y="50%" width="100%" height="100%"/>
</clipPath>
</defs>
<circle id="semi-circle1" cx="50%" cy="50%" r="50%" fill="red" clip-path="url(#cut-off-top)" />
<circle id="semi-circle2" cx="50%" cy="50%" r="50%" fill="orange" clip-path="url(#cut-off-bottom)" />
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64143887
复制相关文章
相似问题
腾讯云开发者
