Geek asks and answers

SVG snippets mistakenly treated as HTMLUnknownElement

I'm having trouble compiling an embedded SVG using Javascript.
The problem can be reduced to the following code ( live example here ):

Somewhere inside the body:

<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

Inside onReady:

$("#drawing").append($("<rect style='fill: blue' width='100' height='100' />"));

I expected to see a blue rectangle. However, Chrome and Firefox show nothing.

Using Firebug, I found out that Firefox interprets "rect" as HTMLUnknownElement(and not how SVGElement).
If I select "Edit SVG" in an SVG element (using Firebug) and paste a space somewhere, the SVG seems to redraw and a rectangle appears.

How can I tell the parser to parse this fragment correctly?

+3
source share
4

, :

  • jsfiddle svg,
  • js html-way ( , svg html)
  • jquery dummy-div append(), svg div-elements
  • : svg- jQuery

-, FF image/svg + xml

<svg id="drawing" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"  
     onload="fx()">
  <script type="text/ecmascript" xlink:href="http://code.jquery.com/jquery-latest.js" />
  <script type="text/ecmascript">
  function fx()
  {
   $(document.createElementNS('http://www.w3.org/2000/svg', 'rect'))
     .css('fill','blue')
     .attr({'width':100,'height':100})
     .appendTo('#drawing');
   }
  </script>  
</svg>

, , .

, , , :

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script  type="text/javascript">
/*<![CDATA[*/

function fx(obj,params)
{
  var svgDoc=obj.contentDocument;
  if(typeof params.name!='string')return;
  var props=$.extend({'attrs':{},'style':{},'selector':null},params);
      props.target=(!props.selector)?svgDoc.documentElement:$(svgDoc).find(props.selector)

    $(svgDoc.createElementNS('http://www.w3.org/2000/svg', props.name))
     .css(props.style)
     .attr(props.attrs)
     .appendTo(props.target);
}

/*]]>*/
</script>
</head>
<body>
  <object onload="fx(this,{'name':'rect','attrs':{'width':100,'height':100},'style':{'fill':'blue'},'selector':'#drawing'})" 
          data="my.svg" 
          type="image/svg+xml" 
          width="200" 
          height="200">
    <param name="src" value="my.svg">
  </object>
</body> 
</html>

:

  • : ()
  • ATTRS: ()
  • : ()
  • selector: selector (, , )
+1

, SVG XHTML, SVG: http://phrogz.net/svg/svg_in_xhtml5.xhtml

, XHR SVG XML, node SVG: http://phrogz.net/svg/fetch_fragment.svg

:

  • jQuery SVG .
  • SVG createElementNS, URI SVG 'http://www.w3.org/2000/svg'. ( , , SVG .)
  • , XHTML XML (content-type: application/xhtml + xml), text/html.

, SVG. SVG, SVG-in-XHTML, (, xlink:href).

// Example usage:
//   var parentNode = findElementInTheSVGDocument();
//   var r = createOn( parentNode, 'rect', {
//     x:12, width:10, height:10, 'fill-opacity':0.3
//   });
function createOn(root,name,attrs,text){
  var doc = root.ownerDocument;
  var svg = root;
  while (svg.tagName!='svg') svg=svg.parentNode;
  var svgNS = svg.getAttribute('xmlns');
  var el = doc.createElementNS(svgNS,name);
  for (var attr in attrs){
    if (attrs.hasOwnProperty(attr)){
      var parts = attr.split(':');
      if (parts[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+parts[0]),parts[1],attrs[attr]);
      else el.setAttributeNS(null,attr,attrs[attr]);
    }
  }
  if (text) el.appendChild(document.createTextNode(text));
  return root.appendChild(el);
}
+1

, SVG-, JSON . CoffeeScript, . SVG, HTML, , .

https://github.com/pwnall/ddr/blob/master/javascripts/graphics/pwnvg.coffee#L169

SVG SVG, DOMParser SVG, () SVG DOM.

In theory, there is a simpler (and faster approach), but it does not work right now. http://crbug.com/107982

0
source

See: Converting svg to base64

I always make sure the svg snippet is inside the svg element, or just forcibly update svg.

0
source

More articles:


All Articles