Question

我这里有一个棘手的问题，我找到的唯一答案是在这里：Creating Curved Text with SVG and 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>

Answer 1

罗伯特给了我正确的答案：“ textPath”标签中有一个错字，需要大写的“ P”。

使用带有xlink：href的javascript在SVG弯曲文本中分配路径

1 个答案: