我一直在尝试缩放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>
编辑:更新标题,使预期行为更清晰。
发布于 2018-07-19 17:35:17
我想你的CSS选择器是错的。您不希望缩放symbol #example-svg
,而是希望缩放.svgcontainer
中的svg
元素。像这样的东西是你要找的吗?
其他需要注意的事情:
preserveAspectRatio="xMidYMid"
;这等同于默认值(详情请参见MDN/SVG/Attribute/preserveAspectRatio )。preserveAspectRatio="xMidyMid"
;y应该是大写的。SVG在这方面非常挑剔;您很幸运,因为这也是默认设置。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>
发布于 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>
https://stackoverflow.com/questions/51417139
复制相似问题