SVG 基本對映

藉由對 SVG 中相對應的區域，將資料集的值新增為稱為 data-cv-key 的新屬性，您可以在 SVG 中的元素和資料集中的值之間進行對映。

系統未定義其他 SVG 元素的行為。

下列 SVG 檔案沒有圓形的 data-cv-key 屬性：

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="10" cy="10" fill="#cd5c5c" r="10"/>
		<circle cx="30" cy="10" fill="#fa8072" r="10"/>
		<circle cx="50" cy="10" fill="#e9967a" r="10"/>
		<circle cx="70" cy="10" fill="#ffa07a" r="10"/>
		<circle cx="90" cy="10" fill="#dc143c" r="10"/>
	</g>
	<g>
		<circle cx="70" cy="30" fill="#adff2f" r="10"/>
		<circle cx="10" cy="30" fill="#ff0000" r="10"/>
		<circle cx="30" cy="30" fill="#b22222" r="10"/>
		<circle cx="50" cy="30" fill="#8b0000" r="10"/>
	</g>
</svg>

如果您將載入此視覺化，它會顯示如下顯示。 不可能會對映至資料。

如果您將 data-cv-key 屬性對映至 SVG，則您可以將資料對映至 SVG 中的圓形。

<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle data-cv-key="A2" cx="10" cy="10" fill="#cd5c5c" r="10"/>
		<circle data-cv-key="A3" cx="30" cy="10" fill="#fa8072" r="10"/>
		<circle data-cv-key="A4" cx="50" cy="10" fill="#e9967a" r="10"/>
		<circle data-cv-key="A5" cx="70" cy="10" fill="#ffa07a" r="10"/>
		<circle data-cv-key="B2" cx="90" cy="10" fill="#dc143c" r="10"/>
	</g>
	<g>
		<circle data-cv-key="B3" cx="70" cy="30" fill="#adff2f" r="10"/>
		<circle data-cv-key="B4" cx="10" cy="30" fill="#ff0000" r="10"/>
		<circle data-cv-key="B5" cx="30" cy="30" fill="#b22222" r="10"/>
		<circle data-cv-key="D1" cx="50" cy="30" fill="#8b0000" r="10"/>
	</g>
</svg>

以及下列資料：

如果您使用此 SVG 並將 ref 拖曳至位置資料格，以及將 cat 拖曳至位置顏色資料格，則圓形的顏色會有種類資料一起對映。