使嵌入式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>