Skip to content Skip to sidebar Skip to footer
Home / Javascript / Object / Svg

Manipulating Objects With Js

Post a Comment
I want change the attribut off a SVG object. instanceRoot property.

The page is last updated on June 27, 2011.

AS a side note, in any case - from what I could tell - you require Firefox 4+ to use SVG properly.

EDIT:

Or perhaps, if it suits you, you can change your code a bit:

functionsetUsedFill1(uId, fill) {
  document.getElementById(uId).setAttributeNS(null, 'fill', fill);
}

and call it:

<inputtype="button" value="test" onclick="setUsedFill1('c1', 'yellow');"/>

instead.

Solution 2:

In a comment on another answer, you asked "is there any alternative?"

For SVG work, the alternative that I use is the Raphael javascript library.

It is an excellent library for working with SVG grpahics and animations in Javascript; makes things a lot easier, and as an added bonus, it even works in some really old browsers -- including old versions of IE, as far back as IE6.

The reason it works with IE is because it transparently detects the browser and switches to drawing the graphics using VML instead of SVG. But from your perspective as a developer, you don't need to know about this; all you need to know is that it works in all browsers. Sweet.

It also doesn't depend on any other libraries; you don't need to be using JQuery or anything else to use it (although it works just fine with them if you do want to).

I don't do any work at all now in pure SVG; everything is done via Raphael.

Solution 3:

Although it's not quite clear in the documentation, setting values in a use element's instanceRootcurrentInstance sets the actual element in the def. At least, this is how it appears to work on chrome and IE11. FF29 still has no instanceRoot.

There are two tweaks to get the OP's example to work as intended:

  1. Set the fill of c1 to inherit
  2. In the click handler, set the fill attribute of the use element, not the instanceRoot.correspondingElement.

Here is the OP's code, modified:

<?xml version="1.0" encoding="UTF-8"?><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"><head><title>SVG use test</title><scripttype="text/javascript">functionsetUsedFill(uId, fill) {
          /* Set the fill attribute of the <use> element, not the inner instanceRoot.correspondingElement */document.getElementById(uId).setAttributeNS(null, 'fill', fill);
        }
      </script></head><body><div><inputtype="button"value="test"onclick="setUsedFill('uc1', 'yellow');"/><inputtype="button"value="test"onclick="setUsedFill('uc2', 'red');"/></div><div><svgxmlns="http://www.w3.org/2000/svg"width="300"height="300"><defs><!-- set the fill in the def to "inherit" --><circleid="c1"cx="50"cy="50"r="30"fill="inherit"/></defs><useid="uc1"x="0"y="0"xlink:href="#c1"fill="green"></use><useid="uc2"x="100"y="100"xlink:href="#c1"fill="green"></use></svg></div></body></html>

Post a Comment for "Manipulating Objects With Js"