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

Question

我有一个简单的 svg 元素，它有元素的子元素:fiddle

<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>