如何让SVG元素扩展以填充容器的宽度，同时保持纵横比
如何让SVG元素扩展以填充容器的宽度，同时保持纵横比
提问于 2018-07-19 15:49:52
我一直在尝试缩放SVG以适应容器，而不使用固定的像素值。根据我在网上读到的内容，这应该是可能的，但我没有设法让它工作。下面显示了一些示例代码。关于如何让examplesvg svg元素填充svgcontainer div的宽度(只需使用HTML和CSS)，有什么建议吗？提前谢谢。
body {
background: rgb(17,17,17);
}
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
#examplesvg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}<div class="svgcontainer">
<svg><use xlink:href="#examplesvg"></use></svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="examplesvg" viewBox="0 0 303 103" preserveAspectRatio="xMidyMid">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</symbol>
</defs>
</svg>
编辑:更新标题，使预期行为更清晰。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-19 17:35:17
我想你的CSS选择器是错的。您不希望缩放symbol #example-svg，而是希望缩放.svgcontainer中的svg元素。像这样的东西是你要找的吗？
其他需要注意的事情：
- 你不需要指定
preserveAspectRatio="xMidYMid"；这等同于默认值(详情请参见MDN/SVG/Attribute/preserveAspectRatio )。 - 你有一个拼写错误：
preserveAspectRatio="xMidyMid"；y应该是大写的。SVG在这方面非常挑剔；您很幸运，因为这也是默认设置。 - It应该是
viewBox="-1.5 -1.5 303 103"，因为SVG边框一半绘制在形状内部，另一半绘制在形状外部。
body { background: grey; }
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
.svgcontainer > svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}<div class="svgcontainer">
<svg><use xlink:href="#examplesvg"></use></svg>
</div>
<svg style="display:none">
<defs>
<symbol id="examplesvg" viewBox="-1.5 -1.5 303 103">
<rect width="300" height="100"
style="fill:blue;stroke-width:3;stroke:black" />
</symbol>
</defs>
</svg>
Stack Overflow用户
发布于 2018-07-19 16:31:10
@zenoArrow，请查看下面的工作片段，了解您所面临的已解决问题。
让我解释一下，哪里出了问题：
- 将
width和height设置为svgcontainer中的svg。所以它可以完全缩放，如果没有提到它会将viewBox="0 0 300 100"的宽度和高度设置为svg - 不要使用
preserveAspectRatio="xMidyMid"而是使用preserveAspectRatio="none"来根据父容器缩放/填充svg，如果不添加它将水平缩放，但vertically. viewBox="0 0 303 103"应该等于<rect width="300" height="100"，但这也取决于您的要求。
body {
background: rgb(17, 17, 17);
}
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
.example-svg {
width: 100%;
height: 100%;
}<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="examplesvg" viewBox="0 0 300 100" preserveAspectRatio="none">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</symbol>
</defs>
</svg>
<div class="svgcontainer">
<svg class="example-svg">
<use xlink:href="#examplesvg"></use>
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51417139
复制相关文章
相似问题