SVG 更改其容器的大小(将其展开).如何预防?

Question

>我把SVG图片放在某个块中，块已经扩展

我尝试更改 svg 属性，但随后我得到了不同的图像外观 - 轮廓路径变粗

网页代码

<section class="image item item2 cat_image">   
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt"><defs> 
<path...></g>
</svg>
</section>

CSScode

svg {
transform: scale(0.45);
transform-origin: bottom;
}

我希望块的宽度与 svg 图片相同。

更新： 此外，如果我为块设置宽度以使其紧凑，那么图像也会缩小

Answer 1

Paulie_D建议使用display: inline-block应该是正确的解决方案。

这就是我在以下示例中使用的，它工作正常。

section {
display: inline-block;
background: linen;
}
.smaller {
width: 300px;
height: 400px;
overflow: hidden;
}

<section>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>
<p/>
<section class="smaller">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>

Answer 2

<style>
div.outer{
background:red;
width:200px;
}
</style>
<div class="outer">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="100pt">
<path d="M50,40   l100,0  0,50  -100,0  0,-50"
style="stroke: #000000; fill:green;" />    
</svg>
</div>