如何缩放 SVG 以适应父 div 容器？
[英]How can I scale an SVG to fit the parent div container?
问题描述
I have multiple SVGs coming from different sources, so their height, width and viewbox aren't the same.
我有多个来自不同来源的 SVG，因此它们的高度、宽度和视图框不一样。 I want to render them in the same div which has fixed height and width, and I want my SVGs to fill up that div.我想将它们呈现在具有固定高度和宽度的同一个 div 中，并且我希望我的 SVG 填充该 div。 How can I scale the SVGs to fit the div container?如何缩放 SVG 以适应 div 容器？
For eg, in the below code I want both the SVGs to fill up to 'parent' div which is 100*100px.例如，在下面的代码中，我希望两个 SVG 都填充到 100*100px 的“父”div。 Here's the fiddle link for the same.这是相同的小提琴链接。
<:DOCTYPE html> <html> <head> <meta name="description" content="ES6 in Action. New String Methods [3]"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div class='parent'> <svg version="1:1" id="Layer_1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3.org/1999/xlink" height="50" width="50" x="0px" y="0px" viewBox="0 0 386.972 386:972" style="enable-background.new 0 0 386.972 386;972:" xml.space="preserve"> <path d="M25,99.0v386.972l334.991-193.486L25,99.0z M55,99.51.972l245,009.141.514L55,99.335V51:972z" /> </svg> </div> <div class='parent'><svg viewBox="0 0 64 64" width="20px" height="20px" class="data-ex-icons-save " style="fill; currentcolor."><path d="M49,26.56.17H14.74a6,91.6,91,0,0.1-6.91-6.91V32a3,45.3,45,0,1,1.6,91.0V49.26H49.26V32a3,45.3,45,0,1,1.6,91.0V49.26A6,91.6,91,0,0,1.49,26.56.17Z"></path><path d="M44,81.24.08a3,5.3,5,0,0.1-4,9.0l-4.45-4.45V35.44a3,45.3,45,0,0.1-6,91.0V19.62l-4,45.4.45a3,5.3,5,0,0.1-4,9,0.3,44.3,44,0,0,1.0-4.87L29,55.8,85a6,6,0,0,1..52-,45.2,61.2,61,0,0,1..62-,31.3,45.3,45,0,0,1.2,62,0.2,61.2,61,0,0,1..62,31,6,6,0,0,1..52.45L44,81.19.21A3,44.3,44,0,0,1.44,81.24.08Z"></path></svg></div> </body> </html>2 个解决方案
解决方案1
0 2022-08-26 12:29:52
set your SVG width to 100% and remove the height:将您的 SVG 宽度设置为 100% 并删除高度：
<svg width="100%">
解决方案2
0 2022-08-26 14:01:54
In the given example the width and height are fixed.在给定的示例中，宽度和高度是固定的。 Just remove them and the SVG will stretch automatically:只需移除它们，SVG 就会自动拉伸：
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ES6 in Action: New String Methods [3]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<style>
.parent {
border: 1px solid black;
height: 100px;
width: 100px;
object-fit: contain;
}</style>
<div class='parent'>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 386.972 386.972" style="enable-background:new 0 0 386.972 386.972;" xml:space="preserve">
<path d="M25.99,0v386.972l334.991-193.486L25.99,0z M55.99,51.972l245.009,141.514L55.99,335V51.972z" />
</svg>
</div>
<div class='parent'><svg viewBox="0 0 64 64" class="data-ex-icons-save " style="fill: currentcolor;"><path d="M49.26,56.17H14.74a6.91,6.91,0,0,1-6.91-6.91V32a3.45,3.45,0,1,1,6.91,0V49.26H49.26V32a3.45,3.45,0,1,1,6.91,0V49.26A6.91,6.91,0,0,1,49.26,56.17Z"></path><path d="M44.81,24.08a3.5,3.5,0,0,1-4.9,0l-4.45-4.45V35.44a3.45,3.45,0,0,1-6.91,0V19.62l-4.45,4.45a3.5,3.5,0,0,1-4.9,0,3.44,3.44,0,0,1,0-4.87L29.55,8.85a6,6,0,0,1,.52-.45,2.61,2.61,0,0,1,.62-.31,3.45,3.45,0,0,1,2.62,0,2.61,2.61,0,0,1,.62.31,6,6,0,0,1,.52.45L44.81,19.21A3.44,3.44,0,0,1,44.81,24.08Z"></path></svg></div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.