ANTON072
3/31/2016 - 10:14 AM

svgのsymbol要素

svgのsymbol要素

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">

	<!-- 普通の図形をワンセットとして繰り返し仕様したい場合はsymbolを使う -->

	<symbol id="symbol" viewBox="0 0 200 200">
		<polygon points="0,70 40,1 80,70"></polygon>
		<circle cx="80" cy="80" r="35" fill="#09c"></circle>
		<rect x="85" y="85" width="70" height="70"></rect>
	</symbol>

	<use xlink:href="#symbol" fill="#6c0" stroke="#000" x="0" y="0" width="160" height="160"></use>
	<use xlink:href="#symbol" fill="#fc0" stroke="#f00" x="0" y="0" width="100" height="100"></use>
	<use xlink:href="#symbol" fill="#fc0" stroke="#f00" x="0" y="0" width="10" height="10"></use>

</svg>