SVG through the jQuery.svg_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-06 12:08 出处：网络

In jQuery svg plugin (http://plugins.jquery.com/project/svg) work with svg is performed starting from div element and creating new svg object inside of d开发者_StackOverflow中文版iv:

Attach an SVG canvas to a with the following:

$(selector).svg();

Is it possible to connect with jquery to existing svg-object? If "yes" how to do that?

EDIT: Suggested tip:

<body onload="alert('loaded');testSvg();">
    <div id="div3" style="border: solid 1px black; width:200px; height:100px">
        <svg id="svg3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
    </div>

    <script type="text/javascript">
    function testSvg() {
        var svgRootElement = $("#svg3").get();
        var svgWrapper = new $.svg._wrapperClass(svgRootElement);
        svgWrapper.circle(30, 25, 50, { fill: 'red' });
    }

causes an error:

'TypeError: Unable to get value of the property 'createElementNS': object is null or undefined' error...

why?

Yes, it is possible. It's described here, although it's a bit difficult to find. If you're using inline SVG (e.g. you're not embedding SVG into HTML using an object tag, or an iframe), then the following should work:

$(document).ready(function(){
var svgRootElement = $("#myExistingSVGObject");
var svgWrapper = new $.svg._wrapperClass(svgRootElement); // this is the equivalent of what is returned from the call to .svg()
})