使嵌入式SVG秤适合父容器

Question

我想撰写我的第一个SVG图形并将其嵌入HTML中。 如果我调整HTML容器的大小以适合硬编码的SVG大小，这很容易，否则会发生不好的事情：

 figure { background-color: gray; padding: 10px; width: 250px; height: 100px; } figure svg { background-color: pink; } figure svg circle { fill: salmon; } figure svg text { fill: yellow; } 

 <figure> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="50mm" height="50mm" > <circle cx="25mm" cy="25mm" r="25mm" /> <text x="25mm" y="33mm" font-size="25mm" text-anchor="middle">SVG</text> </svg> </figure> <figure>Hello, World!</figure> 

可伸缩性是该格式的杀手级功能，但我无法使其工作甚至无法理解其工作原理。 我对视口，坐标，大小，用户单位等基本概念完全困惑，而我阅读的文章并没有帮助（很多建议您甚至需要CSS技巧）。

是否可以修复我的代码，使<svn>项自动扩展或缩小以适合它们所包裹的<figure>的尺寸？ 还是我需要使用JavaScript动态更改width和height ？

Answer 1

就像任何其他HTML / CSS问题一样，如果您希望孩子适合其父母，则必须使用相对单位。

在SVG内联样式中，您以mm为单位设置了宽度，这是绝对单位。 而是使用相对单位，例如百分比或vw / vh单位。

在下面的示例中，我将svg内联设置为width="100%" height="100%". Then, in the CSS for your width="100%" height="100%". Then, in the CSS for your , set its width and height. I picked 由于SVG应该是正方形，因此, set its width and height. I picked为两者都, set its width and height. I picked 50vw`。

在svg的<circle>部分中，我们将其cx和cy值设置为50%以使其在svg居中。 根据定义，它的半径自然是其宽度的50% ，因此我们继续设置r="50%" 。

我以类似的百分比居中放置<text> ，然后使用font-size相对单位，因此当svg更改大小时，文本将按比例放大或缩小。

尝试使用全屏显示以下片段来调整浏览器窗口的大小，以查看实际效果。 另外，尝试更改容器图形的宽度和高度的值，以查看其如何影响SVG。

请注意，我继续为其中包含SVG的图形分配了ID，这样第二个图形就不会受到影响。

 figure { background-color: gray; padding: 10px; } #svg-container { width: 50vw; height: 50vw; } figure svg { background-color: pink; } figure svg circle { fill: salmon; } figure svg text { fill: yellow; } 

 <figure id="svg-container"> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <circle cx="50%" cy="50%" r="50%" /> <text x="50%" y="60%" font-size="20vw" text-anchor="middle">SVG</text> </svg> </figure> <figure>Hello, World!</figure>