用jQuery修改Raphael SVG图像 [英] Modifying Raphael SVG image with jQuery

问题描述

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

I have a small application where I need to generate textPath labels for arcs. I'm drawing the arcs via Raphael and that is working great. However Raphael has no support for textPaths. We can add them to the svg element via jQuery but they don't render for some reason. When I duplicate the dynamically generated code statically it renders fine.

<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>

使用上面的代码，您将永远看不到圆弧的标签.但是，当对以下内容进行硬编码时，它将按预期呈现:

With the above code you never see the label for the arc. However when the following is hard coded it renders as expected:

<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的见解将不胜感激.

Any insight as to why I'm not seeing my entire svg would be much appreciated.

我已经对JavaScript进行了更改，我认为它几乎已经存在，但是textPath仍然无法呈现.这是当前的代码，这主要归功于Femi:

I've made changes to my javascript and I think it's almost there but the textPath still won't render. Here is the current code, mostly thanks to 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);
                };

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

I get a bounding box of 0x0 for the textPath but no textPath.

推荐答案

因此，在找到Raphael的补丁后

So, after finding a patch to Raphael here and making a small tweak to the patch it is working. I'm still not sure what I was missing but the textPaths now render and everyone is happy. Thanks to everyone for the help.

这篇关于用jQuery修改Raphael SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！