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/

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

Answer 1

引用的元素＆＃34;使用＆＃34;只继承style-propertys（你也可以写成style =＆＃34; ...＆＃34; f.e.fill，stroke等）。变换确实有效，但最好的方法是使用符号：

＆＃13;

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

＆＃13;

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

1 个答案: