Loading ...
Sorry, an error occurred while loading the content.
 

Re: question about changing text

Expand Messages
  • Francis Hemsher
    ... Hi Adres, I think the problem is with the id format. I guess your format is germane to your application. But, try using standard id characters. Francis
    Message 1 of 6 , Jun 3, 2009
      --- In svg-developers@yahoogroups.com, "gonzo4819" <gonzo4819@...> wrote:
      >
      > I have a composite object (id="router") made up of several elements
      > (circles, lines, ellipses, path, etc.) The final element in this
      > composite object is a text element like this:
      >
      > <text id="comment" x="23" y="75" font-size="10">test lab</text>
      >
      > then I use this composite object like this:
      >
      > <use id="10.0.0.3" xlink:href="#router" x="20" y="50"/>
      >
      > Using javascript, how do I change the text ("test lab") in this
      > object?
      >
      > I know how to get the particular object like this:
      >
      > router = document.getElementById("10.0.0.3");
      >
      > But I do not know how to drill down to get the text part of that
      > object since it was referenced by xlink:href. I tried this:
      >
      > router = document.getElementById("10.0.0.3");
      > var textNode = router.getElementById("comment");
      > textNode.firstChild.nodeValue = "new comment";
      >
      > but getElementById must not be a function of "router" because this
      > fails and generates an error.
      >
      > Any help would be appreciated...thanks,
      >
      > -Andres
      >

      Hi Adres,
      I think the problem is with the id format. I guess your format is germane to your application. But, try using standard id characters.
      Francis
    • hansschmucker
      ... No time to look into it now, but three little notes: 1. getElementById makes only sense for document, since ids have to be unique in a document. 2. If you
      Message 2 of 6 , Jun 3, 2009
        > > I know how to get the particular object like this:
        > >
        > > router = document.getElementById("10.0.0.3");
        > >
        > > But I do not know how to drill down to get the text part of that
        > > object since it was referenced by xlink:href. I tried this:
        > >
        > > router = document.getElementById("10.0.0.3");
        > > var textNode = router.getElementById("comment");
        > > textNode.firstChild.nodeValue = "new comment";
        > >
        > > but getElementById must not be a function of "router" because this
        > > fails and generates an error.

        No time to look into it now, but three little notes:
        1. getElementById makes only sense for document, since ids have to be unique in a document.
        2. If you want to drill down to a particular node type, you can use getElementsByTagName
        3. Be aware that you might have to use the NS counterparts for these functions in an SVG document if the elements use another namespace.

        It may not be enough to point you into the right direction, but at least it may help you understand the flaw in your logic.
      • Doug Schepers
        Hi, Andres- ... The short answer is: you can t. doesn t work like that. You ll need to work around it by inserting a new text element for each
        Message 3 of 6 , Jun 3, 2009
          Hi, Andres-

          gonzo4819 wrote (on 6/3/09 12:47 PM):
          > I have a composite object (id="router") made up of several elements
          > (circles, lines, ellipses, path, etc.) The final element in this
          > composite object is a text element like this:
          >
          > <text id="comment" x="23" y="75" font-size="10">test lab</text>
          >
          > then I use this composite object like this:
          >
          > <use id="10.0.0.3" xlink:href="#router" x="20" y="50"/>
          >
          > Using javascript, how do I change the text ("test lab") in this
          > object?

          The short answer is: you can't. <use> doesn't work like that. You'll
          need to work around it by inserting a new text element for each instance.

          The longer answer is that the SVG WG recognizes this need, and we are
          working on a specification that will let you change the text label, and
          give you detailed control over specific attribute values in <use>.
          However, you will have to wait for that functionality to be implemented.

          In the meantime, I'm afraid you'll have to use the workaround. If
          you're really desperate, and don't mind using some nonstandard (or
          not-yet-standard) SVG and a script lib, you can use the param.js script
          lib here:
          http://dev.w3.org/SVG/modules/param/master/SVGParamPrimer.html

          Regards-
          -Doug
        • Domenico Strazzullo
          As suggested in previous answers the XML naming conventions should be respected when setting your IDs. Then, since you are manipulating router
          Message 4 of 6 , Jun 4, 2009
            As suggested in previous answers the XML naming conventions should be respected when setting your IDs. Then, since you are manipulating
            "router" programmatically you could simply renounce to the use of use and use (:)) cloneNode() instead, not forgetting to change the descendants' IDs and to register events, if any, as events are not cloned:

            var routerClone = router.cloneNode(true);
            routerClone.id += "_clone";
            var nodes = routerClone.getElementsByTagNameNS("http://www.w3.org/2000/svg","*");
            for (var i = 0; i < nodes.length; i ++) nodes.item(i).id += "_clone";

            (Append somewhere).

            Then you can manipulate the clone's elements as you need.

            Some incremental value MUST also be added to the id if you need several instances: .id += "_clone" + inc.

            Domenico



            --- In svg-developers@yahoogroups.com, "gonzo4819" <gonzo4819@...> wrote:
            >
            > I have a composite object (id="router") made up of several elements
            > (circles, lines, ellipses, path, etc.) The final element in this
            > composite object is a text element like this:
            >
            > <text id="comment" x="23" y="75" font-size="10">test lab</text>
            >
            > then I use this composite object like this:
            >
            > <use id="10.0.0.3" xlink:href="#router" x="20" y="50"/>
            >
            > Using javascript, how do I change the text ("test lab") in this
            > object?
            >
            > I know how to get the particular object like this:
            >
            > router = document.getElementById("10.0.0.3");
            >
            > But I do not know how to drill down to get the text part of that
            > object since it was referenced by xlink:href. I tried this:
            >
            > router = document.getElementById("10.0.0.3");
            > var textNode = router.getElementById("comment");
            > textNode.firstChild.nodeValue = "new comment";
            >
            > but getElementById must not be a function of "router" because this
            > fails and generates an error.
            >
            > Any help would be appreciated...thanks,
            >
            > -Andres
            >
          • george55bu
            Try this http://my.opera.com/Coyotee/blog/grouptextchange [Non-text portions of this message have been removed]
            Message 5 of 6 , Jun 17, 2009
              Try this http://my.opera.com/Coyotee/blog/grouptextchange






              [Non-text portions of this message have been removed]
            Your message has been successfully submitted and would be delivered to recipients shortly.