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

Bounding Box of SVGElement ( Any Way in Chrome/FireFox/IE )

Expand Messages
  • Raks A
    Hi, I am writing a program in javascript to manipulate SVG to be used online from browsers, and as part of that I need to figure out the bounding box of an
    Message 1 of 9 , Jan 10, 2011
    • 0 Attachment
      Hi,

      I am writing a program in javascript to manipulate SVG to be used online
      from browsers, and as part of that I need to figure out the bounding box of
      an element
      While searching I saw an api called getBBox(). But when I search in mozilla
      documentation I do not find any such DOM API, but certain search result
      mentions such an API.

      I am kind of confused as to is this API specific to SVG and which all
      browsers implements this API and what are other such apis which are specific
      to SVG which I can use to my advantage

      Any guidance regarding SVG DOM APis which be really helpful

      - Raks A


      [Non-text portions of this message have been removed]
    • th_w@ymail.com
      ... The getBBox is part of the JavaScript SVG API specs[1]. David Dailey has a nice little example of its usage[2], including handling transforms. There is
      Message 2 of 9 , Jan 10, 2011
      • 0 Attachment
        --- In svg-developers@yahoogroups.com, Raks A <rakssvg@...> wrote:
        >
        > While searching I saw an api called getBBox(). But when I search in mozilla
        > documentation I do not find any such DOM API, but certain search result
        > mentions such an API.
        >

        The getBBox is part of the JavaScript SVG API specs[1]. David Dailey has a nice little example of its usage[2], including handling transforms. There is also getScreenBBox(), but it's not well supported (yet).

        Thomas W.


        [1] http://www.w3.org/TR/SVGTiny12/ecmascript-binding.html#module-svg
        [2] http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg
      • Raks A
        But what are the browsers which support all the SVG DOM Apis. We are creating a drawing tool where we want to allow the users to scale and rotate a closed path
        Message 3 of 9 , Jan 10, 2011
        • 0 Attachment
          But what are the browsers which support all the SVG DOM Apis. We are
          creating a drawing tool where we want to allow the users to scale and rotate
          a closed path using the mouse. Now we can capture the mouse events but
          unless and untill there is a fast way to get a SVGPath element
          object, scaling the co-ordinates by parsing the path data every time with
          every mouse event would make the drawing would un-responsive to user

          Surprisingly there is no mention of SVG Ecmascript bindings in mozilla
          documentation

          - Raks A

          On Mon, Jan 10, 2011 at 6:02 PM, th_w@... <th_w@...> wrote:

          >
          >
          > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
          > Raks A <rakssvg@...> wrote:
          > >
          > > While searching I saw an api called getBBox(). But when I search in
          > mozilla
          > > documentation I do not find any such DOM API, but certain search result
          > > mentions such an API.
          > >
          >
          > The getBBox is part of the JavaScript SVG API specs[1]. David Dailey has a
          > nice little example of its usage[2], including handling transforms. There is
          > also getScreenBBox(), but it's not well supported (yet).
          >
          > Thomas W.
          >
          > [1] http://www.w3.org/TR/SVGTiny12/ecmascript-binding.html#module-svg
          > [2] http://srufaculty.sru.edu/david.dailey/svg/getCTM.svg
          >
          >
          >


          [Non-text portions of this message have been removed]
        • th_w@ymail.com
          ... I think at leats getBBox() is supported by all of them (as mentioned, getScreenBBox() unfortunately isn t). ... It s much simpler than that. The path data
          Message 4 of 9 , Jan 10, 2011
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, Raks A <rakssvg@...> wrote:
            >
            > But what are the browsers which support all the SVG DOM Apis.

            I think at leats getBBox() is supported by all of them (as mentioned, getScreenBBox() unfortunately isn't).

            > We are
            > creating a drawing tool where we want to allow the users to scale and rotate
            > a closed path using the mouse. Now we can capture the mouse events but
            > unless and untill there is a fast way to get a SVGPath element
            > object, scaling the co-ordinates by parsing the path data every time with
            > every mouse event would make the drawing would un-responsive to user
            >

            It's much simpler than that. The path data needn't be changed. (Don't change the path data! Parsing path syntax might cause you more trouble than it's worth.) I'd suggest working through an SVG tutorial that makes you familiar with the transform attribute, or have a look at the according chapter of the specs[1]. Rotation and scaling are essential concepts in SVG.


            [1] http://www.w3.org/TR/SVG/coords.html#TransformAttribute
          • Raks A
            Actually I am aware of the transform attribute but as the requirement is for a drawing tool the user/artist/designer would keep iterating on an element ( may
            Message 5 of 9 , Jan 10, 2011
            • 0 Attachment
              Actually I am aware of the transform attribute but as the requirement is
              for a drawing tool the user/artist/designer would keep iterating on an
              element ( may be 1000 times ) by repeatedly scaling an element till he is
              satisfied which means if I keep adding transform there would be 1000s of
              transforms. Now I read the SVG DOM APIs but am not sure if there is a direct
              api to change the scale or rotate values of a transform element,

              I saw a DOM interface called SVGTransform and there is also an api called
              "setScale" in this link
              http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InterfaceSVGTransform
              but
              how am I going to get the SVGTransform object is what I could not find


              - Raks A



              On Tue, Jan 11, 2011 at 1:45 AM, th_w@... <th_w@...> wrote:

              >
              >
              > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
              > Raks A <rakssvg@...> wrote:
              > >
              > > But what are the browsers which support all the SVG DOM Apis.
              >
              > I think at leats getBBox() is supported by all of them (as mentioned,
              > getScreenBBox() unfortunately isn't).
              >
              >
              > > We are
              > > creating a drawing tool where we want to allow the users to scale and
              > rotate
              > > a closed path using the mouse. Now we can capture the mouse events but
              > > unless and untill there is a fast way to get a SVGPath element
              > > object, scaling the co-ordinates by parsing the path data every time with
              > > every mouse event would make the drawing would un-responsive to user
              > >
              >
              > It's much simpler than that. The path data needn't be changed. (Don't
              > change the path data! Parsing path syntax might cause you more trouble than
              > it's worth.) I'd suggest working through an SVG tutorial that makes you
              > familiar with the transform attribute, or have a look at the according
              > chapter of the specs[1]. Rotation and scaling are essential concepts in SVG.
              >
              >
              > [1] http://www.w3.org/TR/SVG/coords.html#TransformAttribute
              >
              >
              >


              [Non-text portions of this message have been removed]
            • th_w@ymail.com
              ... Every element has transform.baseVal.consolidate() to combine all transforms to a single matrix. ... What about this:
              Message 6 of 9 , Jan 10, 2011
              • 0 Attachment
                --- In svg-developers@yahoogroups.com, Raks A <rakssvg@...> wrote:
                >
                > Actually I am aware of the transform attribute but as the requirement is
                > for a drawing tool the user/artist/designer would keep iterating on an
                > element ( may be 1000 times ) by repeatedly scaling an element till he is
                > satisfied which means if I keep adding transform there would be 1000s of
                > transforms.

                Every element has transform.baseVal.consolidate() to combine all transforms to a single matrix.

                > Now I read the SVG DOM APIs but am not sure if there is a direct
                > api to change the scale or rotate values of a transform element,
                >

                What about this:

                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
                <circle cx="50" cy="50" r="50" onclick="
                var t = document.documentElement.createSVGTransform();
                t.setScale(1.5,1.2);
                evt.target.transform.baseVal.appendItem(t);
                evt.target.transform.baseVal.consolidate();
                " />
                </svg>
              • jeff_schiller
                ... In SVG-edit [1], we did it this way: when the user is moving/resizing the element, change its transform attribute and when the user lifts the mouse,
                Message 7 of 9 , Jan 11, 2011
                • 0 Attachment
                  --- In svg-developers@yahoogroups.com, Raks A <rakssvg@...> wrote:
                  >
                  > But what are the browsers which support all the SVG DOM Apis. We are
                  > creating a drawing tool where we want to allow the users to scale and rotate
                  > a closed path using the mouse. Now we can capture the mouse events but
                  > unless and untill there is a fast way to get a SVGPath element
                  > object, scaling the co-ordinates by parsing the path data every time with
                  > every mouse event would make the drawing would un-responsive to user

                  In SVG-edit [1], we did it this way: when the user is moving/resizing the element, change its transform attribute and when the user lifts the mouse, recompute the coordinates of the shape.


                  > Surprisingly there is no mention of SVG Ecmascript bindings in mozilla
                  > documentation

                  Just use the W3C SVG 1.1 spec for the DOM.

                  Regards,
                  Jeff Schiller

                  [1] http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html
                • Raks A
                  Thanks All, I have been reading the SVG DOM interfaces sections in the SVG docs and trying to come to terms with it There are almost no examples of using the
                  Message 8 of 9 , Jan 12, 2011
                  • 0 Attachment
                    Thanks All,

                    I have been reading the SVG DOM interfaces sections in the SVG docs and
                    trying to come to terms with it
                    There are almost no examples of using the interfaces which is causing lot of
                    confusion, Yesterday only I wanted to created a text element and was stuck
                    as to how to create a text element and then set the various values for it

                    I could achieve the task without using the SVG DOM API and instead using the
                    basic DOM API of createElementNS, setAttributeNS and createTextNode

                    Would it have been possible to directly use SVG specific APIs to achieve the
                    same task

                    - Raks A

                    On Tue, Jan 11, 2011 at 9:45 PM, jeff_schiller <jeff_schiller@...>wrote:

                    >
                    >
                    >
                    > --- In svg-developers@yahoogroups.com <svg-developers%40yahoogroups.com>,
                    > Raks A <rakssvg@...> wrote:
                    > >
                    > > But what are the browsers which support all the SVG DOM Apis. We are
                    > > creating a drawing tool where we want to allow the users to scale and
                    > rotate
                    > > a closed path using the mouse. Now we can capture the mouse events but
                    > > unless and untill there is a fast way to get a SVGPath element
                    > > object, scaling the co-ordinates by parsing the path data every time with
                    > > every mouse event would make the drawing would un-responsive to user
                    >
                    > In SVG-edit [1], we did it this way: when the user is moving/resizing the
                    > element, change its transform attribute and when the user lifts the mouse,
                    > recompute the coordinates of the shape.
                    >
                    >
                    > > Surprisingly there is no mention of SVG Ecmascript bindings in mozilla
                    > > documentation
                    >
                    > Just use the W3C SVG 1.1 spec for the DOM.
                    >
                    > Regards,
                    > Jeff Schiller
                    >
                    > [1] http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html
                    >
                    >
                    >


                    [Non-text portions of this message have been removed]
                  • Jeff
                    ... The way you ve done it is exactly right - the SVG DOM is an extension of the basic DOM API - that is to say horribly verbose but at least familiar :)
                    Message 9 of 9 , Jan 12, 2011
                    • 0 Attachment
                      On Wed, Jan 12, 2011 at 8:42 PM, Raks A <rakssvg@...> wrote:
                      > I could achieve the task without using the SVG DOM API and instead using the
                      > basic DOM API of createElementNS, setAttributeNS and createTextNode
                      >
                      > Would it have been possible to directly use SVG specific APIs to achieve the
                      > same task

                      The way you've done it is exactly right - the SVG DOM is an extension
                      of the basic DOM API - that is to say horribly verbose but at least
                      familiar :)

                      There's no easy way provided in the SVG DOM to create a <text>
                      element, unfortunately. This means to create a single svg:text
                      element, it's about 6 lines of JS code:

                      var textElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                      textElem.setAttribute('x', '20');
                      textElem.setAttribute('y', '50');
                      textElem.setAttribute('style', 'font-size:...etc...');
                      var textContent = document.createTextNode('The DOM is lovely');
                      textElem.appendChild(textContent);

                      someG.appendChild(textElem); // add it into my document

                      This inevitably leads anyone writing non-trivial web apps to write
                      their own 'create an element' function.

                      function createSVGElement(tagName, attrMap) {
                      var elem = document.createElementNS(svgns, tagName);
                      for (var attr in attrMap) {
                      elem.setAttribute(attr, attrMap[attr]);
                      }
                      return elem;
                      }

                      createSVGElement('text', {'x':'20', 'y':'50'});

                      Of course watch out for xlink: namespaced attributes. Fun-times.

                      I remember there was going to be some effort from the W3C DOM/SVG
                      Working Group to improve the usability of the DOM (i.e. provide
                      constructors would be a good first step), but don't know the status of
                      that activity.

                      Sadly, since SVG was born in an XML context, innerHTML will not work,
                      but I would assume that browsers will enable that at some point for
                      SVG elements, that will really help templating languages. I even went
                      so far as to write a crazy library for it:
                      http://innersvg.googlecode.com/ but beware that it uses DOMParser to
                      achieve the effect *shudder*

                      Regards,
                      Jeff
                    Your message has been successfully submitted and would be delivered to recipients shortly.