我正在使用 svg 元素，我想為title不同的 svg分配不同的值<line>。例如
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="style.css">
</link>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<line class="upper clone" x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:1" />
<title>original upper location (10,0)</title>
<line class="lower clone" x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:1" />
<title>original lower location (10,260)</title>
<rect x="40" y="50" width="80" height="100" fill="#007bbf">
<title>A blue box</title>
</rect>
<rect x="180" y="50" width="80" height="100" fill="#ec008c">
<title>A pink box</title>
</rect>
</svg>
<!--<script src="index.js"></script>-->
<script src="index2.js"></script>
</body>
</html>如您所見，它只為兩條線顯示相同的工具提示，而rects 則不同。
uj5u.com熱心網友回復：
用 group 標簽包裹<line>and<title>標簽
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="style.css">
</link>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<g>
<line class="upper clone" x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:4;cursor:pointer" />
<title>original upper location (10,0)</title>
</g>
<g>
<line class="lower clone" x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:2;cursor:pointer" />
<title>original lower location (10,260)</title>
</g>
<g>
<rect x="40" y="50" width="80" height="100" fill="#007bbf" cursor="pointer"/>
<title>A blue box</title>
</g>
<g>
<rect x="180" y="50" width="80" height="100" fill="#ec008c" cursor="pointer"/>
<title>A pink box</title>
</g>
</svg>
<!--<script src="index.js"></script>-->
<script src="index2.js"></script>
</body>
</html>更新
<title>不能嵌套在基本 svg 形狀標簽中例如：line rect path
uj5u.com熱心網友回復：
您將<title>元素插入到兩個<line>元素中，就像 a 的<div>作業方式一樣：
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="style.css">
</link>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<line class="upper clone" x1="10" y1="0" x2="220" y2="0" style="stroke:rgb(110, 31, 194);stroke-width:1">
<title>original upper location (10,0)</title>
</line>
<line class="lower clone" x1="10" y1="260" x2="220" y2="260" style="stroke:rgb(218, 149, 22);stroke-width:1">
<title>original lower location (10,260)</title>
</line>
<rect x="40" y="50" width="80" height="100" fill="#007bbf">
<title>A blue box</title>
</rect>
<rect x="180" y="50" width="80" height="100" fill="#ec008c">
<title>A pink box</title>
</rect>
</svg>
<!--<script src="index.js"></script>-->
<script src="index2.js"></script>
</body>
</html>一個簡單但有效的解決方案。
注意：您可能希望將游標移到正確的位置以查看工具提示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437789.html