当通过link元素引用时，为什么SVG rect元素不应用宽/高？

Question

我试图让<use>元素引用<defs>元素中的元素，但更改了它们的大小。具体地说，我尝试引用一个<rect>元素并设置/更改width和height属性，但它不会呈现这些元素：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
    <defs>
        <rect id="square-1" width="100" height="100" fill="tomato" />
        <rect id="square-2" fill="lime" />
    </defs>

    <use xlink:href="#square-1" />
    <use xlink:href="#square-2" width="50" height="50" x="25" y="25"/>
</svg>

#square-2根本不会被呈现，因为width和height没有任何效果。

作品：http://jsfiddle.net/Thasmo/gue0km6z/2/

不会：http://jsfiddle.net/Thasmo/gue0km6z/1/

为什么不能为引用的<rect>元素设置/覆盖width和height？

Answer 1

由"use“引用的元素只继承样式属性(也可以写为style=的所有内容”...“f.e.填充、描边等)。转换确实有效，但最好的方法是使用符号：

​

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1">
	<defs>
		<rect id="square-1" width="100" height="100" fill="tomato" />
        <symbol id="square-2" viewBox="0 0 100 100">
            <rect fill="lime" width="100" height="100"/>
        </symbol>
	</defs>

	<use xlink:href="#square-1" />
	<use xlink:href="#square-2" width="50" height="50" x="25" y="25"/>
</svg>

​