使用 jQuery 修改 Raphael SVG 图像

Question

我有一个小应用程序，我需要在其中为弧生成 textPath 标签。我正在通过 Raphael 绘制弧线，效果很好。但是 Raphael 不支持 textPaths。我们可以通过 jQuery 将它们添加到 svg 元素，但由于某种原因它们不会呈现。当我静态复制动态生成的代码时，它呈现得很好。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
  <desc>Created with Raphaël</desc><defs></defs>
  <a title="This is a test entry">
    <path fill="none" stroke="#1e79a0" d="M395.2627944162883,355A110,110,0,0,1,199.5099996593139,344.74103073833805" style="stroke-width: 20px; " stroke-width="20" id="This_is_a_test_entry"></path>
  </a>
  <text>
    <textpath xlink:href="#This_is_a_test_entry">This is a test entry</textpath>
  </text>
</svg>

使用上面的代码，您永远不会看到弧的标签。但是，当以下内容被硬编码时，它会按预期呈现：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600">
  <a title="Bacon">
    <path id="Arc" fill="none" stroke="#1e79a0" d="M395.2627944162883,355A110,110,0,0,1,201.13265490709162,348.2208261467985" style="stroke-width: 20;" stroke-width="20">
    </path>
  </a>
  <text>
    <textPath xlink:href="#Arc">This is an Arc</textPath>
  </text>
</svg>

任何关于为什么我没有看到我的整个 svg 的见解将不胜感激。

编辑：

我已经对我的 javascript 进行了更改，我认为它几乎就在那里，但 textPath 仍然不会呈现。这是当前的代码，主要感谢 Femi：

function drawRange(start, end, R, range, id, title) {
                    var color = "hsb(".concat(Math.round(R) / 200, ",", end / 360, ", .75)");
                    var key_position = key[id];
                    var svg_bits = document.getElementsByTagName('svg')[0].childNodes;
                    var svgns = document.createElementNS('http://www.w3.org/2000/svg', "path");
                    var path;
                    range.attr({title: title});
                    range.animate({arc: [start, end, R]}, 900, ">");
                    //Add an id to the path element that was just drawn.  This doesn't seem to help though.
                    for(var i = 0; i < svg_bits.length; i++) {
                        if (svg_bits[i].tagName == "a" && svg_bits[i].getAttribute('title') == title){
                            path = svg_bits[i].childNodes[0];
                        }
                    }
                    path.setAttribute('id', title);
                    //Add the name to the key, set the color and unhide the element.
                    $(key_position).html(range.attr("title"));
                    $(key_position).css('color', Raphael.getRGB(color).hex);
                    $(key_position).show();
                };



function makeSVG(tag, attrs) {
                    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
                    for (var k in attrs)
                        el.setAttribute(k, attrs[k]);
                    return el;
                };

function addLabel(label) {
                    var text = makeSVG("text", {});
                    var title = makeSVG("textPath", {"xlink:href":'#' + label.replace(/\s/g, '_')});
                    title.appendChild(document.createTextNode(label));
                    text.appendChild(title);
                    r.canvas.appendChild(text);
                };

我得到一个 0x0 的 textPath 边界框，但没有 textPath。

Answer 1

您可能需要删除第一个示例中出现的xlink，或者添加适当的 XML 命名空间定义。

编辑：当您添加 textPath 元素时，您可能需要使用正确的元素名称（textPath，而不是 textpath）。

编辑：比较有趣，因为它结合了浏览器和 jQuery 来改变路径。为了得到正确的东西，使用这个函数（从jquery's append not working with svg element?的答案中解放出来）：

function makeSVG(tag, attrs){
   var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
   for (var k in attrs)
     el.setAttribute(k, attrs[k]);
   return el;
 }

然后这样做：

var paper = Raphael("notepad", 320, 200);

// do all your other stuff here
...

var text = makeSVG("text", {});
       var c = makeSVG("textPath", {"xlink:href":"#Arc"});
       c.appendChild(document.createTextNode("This is an Arc"));
       text.appendChild(c);
paper.canvas.appendChild(text);

这将为您提供正确的 SVG：但是，它仍然无法正确绘制，这很奇怪。

Answer 2

如果您不担心您的工作无法在 ie8 或更早版本中运行，为什么不使用支持 textpath 的 kieth wood 的 jquery SVG 插件 插件的路径语法不同，但很容易从 Raphael 转换 SVG 插件提供了漂亮的径向渐变，但这就是我现在参与其中的原因。

如果您希望在路径上显示文本而不用每个字母都弄脏曲线，那么您可以继续使用 Rap 并使用它...http://irunmywebsite.com/raphael/additionalhelp.php?v=1&q=anglebannersoncurves

请原谅拼写 iPod 新手

Answer 3

因此，在找到 Raphael here 的补丁并对它正在工作的补丁进行小幅调整之后。我仍然不确定我错过了什么，但 textPaths 现在呈现并且每个人都很高兴。感谢大家的帮助。

Answer 4

Femi 的回答非常好，唯一缺少的是让它重绘和设置 xlink 命名空间。

我无法弄清楚根本原因，但它一定是 Raphael 的核心部分阻止了 SVG 画布更新，因为修复绘图所需要做的就是通过快速删除然后读取来强制重绘来自 DOM 的 svg 元素：

$('#myRaphaelDiv').html($('#myRaphaelDiv').html());

应该注意的是，任何对 SVG 属性的直接攻击都会破坏与使用 VML 的浏览器（sigh、IE）的兼容性。我还没有研究在 VML 中处理文本路径的方法。下面的代码是为了完整性。

// add the new namespace attribute to the SVG canvas. 'raphael' is the Raphael instance.
// note that this only needs to be done once.
$(raphael.canvas).attr('xmlns:xlink', "http://www.w3.org/1999/xlink");

// draw the curved text
var lblId = 'some_unique_dom_id';
var path = raphael.path().attr({
    stroke : 'none' // defaults to black
    // ...other path attributes used in generating it...
});
var label = raphael.text().attr({ 'text-anchor' : 'start' });

// create and inject raw SVG textPath element
var link;
try {
    link = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
} catch (e) {
    // no createElementNS() method is pretty much synonymous with using IE, so
    // this is where you would do your VML version of a text path
    alert("Your browser does not support SVG, please use Firefox, Chrome etc");
}
link.setAttribute('xlink:href', '#' + lblId);
link.appendChild(document.createTextNode("path-oriented text"));

// finally, force a redraw of the SVG document. 
// Obviously, you would defer this until all elements had been added.
$('#myRaphaelDiv').html($('#myRaphaelDiv').html());