将图像添加到 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.