將圖像添加到 svg -> tspan 標簽時遇到問題
[英]Having trouble adding an image to an svg -> tspan tag
問題描述
我已嘗試遵循其他用戶的提示，但似乎我沒有做對或根本無法完成。 我正在嘗試使用 tspan 標簽將圖像添加到 SVG texte 標簽。 感謝任何建議。
這是片段： https://jsfiddle.net/mLkts2p5/
*{
box-sizing:border-box;
}
html,
body {
height: 100vh;
width: 100vw;
padding: 0%;
margin: 0%;
background-color: rgba(16, 14, 23, 1);
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" href="test.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="4vh" viewBox="0 0 100% 3vh" class="headerrow">
<text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">Name<tspan id="pin"></tspan></text>
<text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">1111</text>
<text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">2222</text>
<text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">3333</text>
<text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163,126)" font-size="1.1vw" font-weight="bold">4444</text>
</svg>
<script>
let elem = document.createElement("img");
elem.src = "https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493";
elem.setAttribute("height", "200px");
elem.setAttribute("width", "200px");
document.getElementById("pin").appendChild(elem);
</script>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2020-02-12 12:16:48
使用document.createElementNS() ，它有效但不在<text>內部。
在文本外創建了一個<g id="pin"></g>並將圖像附加到它。 檢查片段。
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image'); img.setAttributeNS(null, 'height', '20'); img.setAttributeNS(null, 'width', '20'); img.setAttributeNS(null, 'id', 'theID'); img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://media.istockphoto.com/vectors/elephant-head-vector-id1175041493'); img.setAttributeNS(null, 'x', '0'); img.setAttributeNS(null, 'y', '0'); document.getElementById("pin").append(img);
* { box-sizing: border-box; } html, body { height: 100vh; width: 100vw; padding: 0%; margin: 0%; background-color: rgba(16, 14, 23, 1); }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets:"> <script src="https.//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min:js"></script> </head> <body> <svg xmlns="http.//www.w3,org/2000/svg" width="100%" height="4vh" class="headerrow"> <text class="textrowdata1" x="1%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">Name</text><g id="pin"></g> <text class="textrowdata1" x="16%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">1111</text> <text class="textrowdata1" x="21%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">2222</text> <text class="textrowdata1" x="28%" y="70%" fill="rgb(117,163.126)" font-size="1,1vw" font-weight="bold">3333</text> <text class="textrowdata1" x="34%" y="70%" fill="rgb(117,163.126)" font-size="1.1vw" font-weight="bold">4444</text> </svg> </body> </html>
在highcharts的tspan標簽內顯示圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.