<svg>元素匹配子宽度和高度

Question

我有一个简单的svg元素，它有元素的子元素： 小提琴

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <g opacity="1" transform="translate(0,0) scale(3,3) rotate(0)">
        ...
    </g>
</svg>

第一个<g>节点的大小约为31x42像素，但<svg>元素的默认大小为300x150像素。 我希望svg采用其子节点的大小，我该怎么做？ 添加height=100%不起作用（它保持在300x150）。

Answer 1

如果你不介意使用javascript，你可以这样做：

 document.getElementsByTagName('svg')[0].style.height = document.getElementsByTagName('g')[0].getBoundingClientRect().height + 'px'; 

 <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <g opacity="1" transform="translate(0,0) scale(3,3) rotate(0)"> <g transform="translate(2.2775,3) scale(1,1) rotate(0)"> <g transform="translate(0,0) scale(1,1) rotate(0)"> <rect x="-1.2" y="-3.5999999999999996" width="5.430000000000001" height="7.469999999999999" fill="rgba(0,0,0,0)" stroke="none"></rect> <g transform="translate(0,0) scale(0.3,0.3) rotate(0)"> <path stroke="none" d="M8.05,-8L8.05,5.1Q8.05,6.3 8.4,6.95Q8.75,7.6 10.1,7.65L10.1,8.9L1.65,8.9L1.65,7.65Q3,7.6 3.35,6.95Q3.7,6.3 3.7,5.1L3.7,-3.35L3.65,-3.35L1,1L0,0.6L3.65,-8L8.05,-8"></path> </g> </g> <g transform="translate(4.029999999999999,0) scale(1,1) rotate(0)"> <rect x="-1.2" y="-3.5999999999999996" width="6.48" height="7.6499999999999995" fill="rgba(0,0,0,0)" stroke="none"></rect> <g transform="translate(0,0) scale(0.3,0.3) rotate(0)"> <path stroke="none" d="M4.65,-4.65Q5.65,-4.25 5.8,-2.75Q5.75,-1.75 4.95,-1.1Q4.15,-0.4 3.15,-0.4Q0.7,-0.65 0.45,-3Q0.45,-4.95 2.05,-6.45Q3.65,-7.9 7.45,-8Q10.35,-7.9 11.8,-6.4Q13.3,-4.95 13.3,-3.05Q12.95,0.15 9.85,1.3Q6.8,2.4 4.55,3.95L4.55,4Q8.05,3.6 10.1,5.05L11.5,5.15Q12.25,4.85 12.35,3.15L13.6,3.15Q13.65,5.3 12.85,7.3Q12,9.35 9.45,9.5Q7.65,9.3 6.5,8.25Q5.35,7.1 3.8,6.8Q1.7,6.9 1.4,8.9L0.1,8.9Q-0.35,6.15 1.7,4.45Q3.75,2.75 5.85,1.65Q7.15,0.85 8.05,-0.4Q9,-1.7 9.05,-3.3Q8.95,-6.85 6.15,-6.6Q3.45,-6.55 3.55,-5.55Q3.7,-5 4.65,-4.65"></path> </g> </g> </g> <g transform="translate(4.3675,9) scale(1,1) rotate(0)"> <g transform="translate(0,0) scale(1,1) rotate(0)"> <rect x="-1.2" y="-3.5999999999999996" width="6.33" height="7.6499999999999995" fill="rgba(0,0,0,0)" stroke="none"></rect> <g transform="translate(0,0) scale(0.3,0.3) rotate(0)"> <path stroke="none" d="M6.55,-8Q8.45,-8.05 10.4,-7.2Q12.45,-6.4 12.6,-4.15Q12.35,-1.5 10.05,-0.15Q13.15,1.65 13.1,4Q13.05,6.1 11.1,7.75Q9.2,9.4 6.05,9.5Q3.85,9.5 2,8.35Q0.15,7.15 0,4.8Q0.05,3.4 1,2.35Q1.95,1.3 3.2,0.75Q0.55,-0.5 0.35,-3.45Q0.45,-5.8 2.45,-6.9Q4.45,-8 6.55,-8M8.35,-1.05Q9.85,-2.15 10.15,-4.05Q10.15,-5.55 8.8,-6.15Q7.5,-6.8 6.25,-6.75Q4.1,-6.85 3.55,-4.85Q3.75,-3.5 5.7,-2.3Q7.75,-1.1 8.35,-1.05M7.6,3.15L4.7,1.55Q2.8,2.65 2.5,4.75Q2.55,6.1 3.65,7.1Q4.7,8.05 6,8.1Q7.25,8.3 8.35,7.6Q9.4,6.9 9.5,5.55Q9.3,4.05 7.6,3.15"></path> </g> </g> </g> </g> </svg> 

Answer 2

这并不是SVG应该如何运作的。 SVG是一种图像格式。 您通常会指定“画布”的大小，然后在其上绘制内容。

这有点像说“这个JPEG中有一只猫，如何将JPEG设置为猫的大小”。

话虽这么说，如果你不介意使用一些JS，Almis的解决方案大部分时间都可以使用。

但是，否则，无法自动将SVG设置为其内容的大小。