[英]Assigning path in SVG curved text with javascript with xlink:href not working
我这里有一个棘手的问题,我找到的唯一答案是在这里: 使用SVG和JS创建弯曲文本 ...但是当遵循解决方案时,我仍然遇到相同的问题:当标签出现时,弯曲文本不会显示是由代码生成的,我猜曲线没有通过xlink:href参考正确分配给文本。
这是我的示例代码:它应该在所有svg标记中显示弯曲的文本,但是只有调试在起作用,href属性的动态创建和分配似乎根本不起作用。
我不知道这是怎么回事... :(谢谢您的帮助!
<!DOCTYPE html>
<html>
<head>
<style>
svg{
border:1px solid black;
}
</style>
</head>
<body style="background-color: #337799;">
<br>
First test :<br>
<svg id="original" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<defs>
<path id="cuvedPath1" d="M 249.29451409251854 107.29050274981267 A 105 105 0 0 1 298.0259447822062 237.62863470225653"></path>
</defs>
<text id="textContainer" fill="white"></text>
</svg>
<svg id="debug" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<br>
Second test :<br>
<svg id="original2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<defs>
<path id="cuvedPath2" d="M 249.29451409251854 107.29050274981267 A 105 105 0 0 1 298.0259447822062 237.62863470225653"></path>
</defs>
<text id="textContainer2" fill="white"></text>
</svg>
<svg id="debug2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
</svg>
<script>
// first test
var _text = document.createElementNS('http://www.w3.org/2000/svg','textpath');
_text.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','#cuvedPath1');
_text.textContent = 'my test string';
_textContainer = document.getElementById('textContainer');
_textContainer.appendChild(_text);
// second test
_text = document.createElementNS('http://www.w3.org/2000/svg','textpath');
_text.setAttributeNS('http://www.w3.org/1999/xlink','href','#cuvedPath2'); // test just with 'href'
_text.textContent = 'another test string';
_textContainer = document.getElementById('textContainer2');
_textContainer.appendChild(_text);
// debug in another svg tag:
document.getElementById('debug').innerHTML = document.getElementById('original').innerHTML;
document.getElementById('debug2').innerHTML = document.getElementById('original2').innerHTML;
</script>
</body>
</html>
罗伯特给了我正确的答案:“ textPath”标签中有一个错字,需要大写的“ P”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.