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

question about changing text

Expand Messages
  • gonzo4819
    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
    Message 1 of 6 , Jun 3 9:47 AM
    • 0 Attachment
      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
    • 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 2 of 6 , Jun 3 1:51 PM
      • 0 Attachment
        --- 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 3 of 6 , Jun 3 4:19 PM
        • 0 Attachment
          > > 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 4 of 6 , Jun 3 7:27 PM
          • 0 Attachment
            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 5 of 6 , Jun 4 4:34 AM
            • 0 Attachment
              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 6 of 6 , Jun 17 5:28 PM
              • 0 Attachment
                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.