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

Re: Need Help to rotate the svg element

Expand Messages
  • fyrd_svg
    SVG elements don t allow the transform attribute and thus cannot be directly rotated. Simple workaround to this is to wrap the SVG element in a and rotate
    Message 1 of 6 , Jan 31, 2011
    View Source
    • 0 Attachment
      SVG elements don't allow the transform attribute and thus cannot be directly rotated. Simple workaround to this is to wrap the SVG element in a <g> and rotate it. For example:

      <g transform="rotate(29.9136, 83, 238.5)">
      <svg></svg>
      </g>


      Thanks,

      Alexis

      --- In svg-developers@yahoogroups.com, "Mr Rauf" <cute_rauf_696@...> wrote:
      >
      > Hi all,
      > i need help on SVG element Rotation....
      >
    • John Delacour
      ... Unless I m missing something crucial, that simply is not the case. Any element can be transformed. It may well be convenient or desirable to do a part or
      Message 2 of 6 , Feb 3, 2011
      View Source
      • 0 Attachment
        At 16:16 +0000 31/01/2011, fyrd_svg wrote:


        >SVG elements don't allow the transform attribute and thus cannot be
        >directly rotated. Simple workaround to this is to wrap the SVG
        >element in a <g> and rotate it. For example:
        >
        ><g transform="rotate(29.9136, 83, 238.5)">
        > <svg></svg>
        ></g>

        Unless I'm missing something crucial, that simply is not the case.
        Any element can be transformed. It may well be convenient or
        desirable to do a part or all or the transformations at <g> level,
        but there is no law against transforming any element by itself.
        Since the original poster wrote simply "i need help on SVG element
        Rotation...", that's all the help he gets for the moment.

        JD
      • Jacob Beard
        Hi John, Alexis is actually correct, and it s in the spec. See the DOM interfaces to SVGSVGElement versus SVGGElement:
        Message 3 of 6 , Feb 3, 2011
        View Source
        • 0 Attachment
          Hi John,

          Alexis is actually correct, and it's in the spec. See the DOM interfaces to
          SVGSVGElement versus SVGGElement:

          http://www.w3.org/TR/SVG/struct.html#InterfaceSVGSVGElement
          http://www.w3.org/TR/SVG/struct.html#InterfaceSVGGElement

          SVGGElement extends SVGTransformable, whereas SVGSVGElement does not. His
          solution is the way I would approach this.

          Cheers,

          Jake

          On Thu, Feb 3, 2011 at 10:17 AM, John Delacour <JD@...> wrote:

          >
          >
          > At 16:16 +0000 31/01/2011, fyrd_svg wrote:
          >
          > >SVG elements don't allow the transform attribute and thus cannot be
          > >directly rotated. Simple workaround to this is to wrap the SVG
          > >element in a <g> and rotate it. For example:
          > >
          > ><g transform="rotate(29.9136, 83, 238.5)">
          > > <svg></svg>
          > ></g>
          >
          > Unless I'm missing something crucial, that simply is not the case.
          > Any element can be transformed. It may well be convenient or
          > desirable to do a part or all or the transformations at <g> level,
          > but there is no law against transforming any element by itself.
          > Since the original poster wrote simply "i need help on SVG element
          > Rotation...", that's all the help he gets for the moment.
          >
          > JD
          >
          >


          [Non-text portions of this message have been removed]
        • Holger Jeromin
          ... The mailtext was: i need help on SVG element Rotation.... , but the title was rotate the svg element . So it could be interpreted, as he wants to rotate
          Message 4 of 6 , Feb 3, 2011
          View Source
          • 0 Attachment
            Jacob Beard schrieb am 03.02.2011 17:13:

            > On Thu, Feb 3, 2011 at 10:17 AM, John Delacour <JD@...> wrote:
            >> At 16:16 +0000 31/01/2011, fyrd_svg wrote:
            >>> SVG elements don't allow the transform attribute and thus cannot be
            >>> directly rotated. Simple workaround to this is to wrap the SVG
            >>> element in a <g> and rotate it. For example:
            >>> <g transform="rotate(29.9136, 83, 238.5)">
            >>> <svg></svg>
            >>> </g>
            >> Unless I'm missing something crucial, that simply is not the case.
            >> Any element can be transformed. It may well be convenient or
            >> desirable to do a part or all or the transformations at <g> level,
            >> but there is no law against transforming any element by itself.
            >> Since the original poster wrote simply "i need help on SVG element
            >> Rotation...", that's all the help he gets for the moment.
            > Alexis is actually correct, and it's in the spec. See the DOM interfaces to
            > SVGSVGElement versus SVGGElement:
            >
            > http://www.w3.org/TR/SVG/struct.html#InterfaceSVGSVGElement
            > http://www.w3.org/TR/SVG/struct.html#InterfaceSVGGElement
            >
            > SVGGElement extends SVGTransformable, whereas SVGSVGElement does not. His
            > solution is the way I would approach this.

            The mailtext was: "i need help on SVG element Rotation....", but the
            title was "rotate the svg element".
            So it could be interpreted, as he wants to rotate the <svg>-element
            (which is not rotateable) and not an other element like text, rect,
            circle (which is).

            --
            best regards
            Holger
          • Erik Dahlstrom
            While it might sound trivial to allow transform on the element, here are some things to consider: The root is always special because it is
            Message 5 of 6 , Feb 4, 2011
            View Source
            • 0 Attachment
              While it might sound trivial to allow 'transform' on the <svg> element,
              here are some things to consider:

              The root <svg> is always special because it is involved in setting up the
              main viewport. If there was a transform attribute should it be applied
              after the viewBox transform or before? To me it sounds like the
              expectation in this thread was that it would be applied after the viewBox
              transform. That is counter-intuitive if you consider the case with nested
              <svg> elements. In those cases you'd likely want transform to be applied
              before the viewBox instead, making it more similar to a <g> element in a
              sense.

              Consider what would happen if you had <svg> inline in HTML and applied a
              CSS3 transform to rotate the svg element. It would rotate the <svg>
              viewport, which is what I would expect. Depending on how the viewer
              displays standalone svgs that might look weird (as in: some parts of the
              svg might end up outside the window).

              Anyway, if the purpose is to do panning, zooming and rotation dynamically
              then there are methods available on the SVGSVGElement interface (note: the
              SVGSVGElement.currentRotate attribute is only available in viewers that
              support SVG Tiny 1.2). If the purpose was to just do a rotation of the
              content and it's static, then go with the suggested <g> wrapper solution.

              Also see http://www.w3.org/Graphics/SVG/WG/track/issues/2252.

              Cheers
              /Erik

              On Thu, 03 Feb 2011 17:13:44 +0100, Jacob Beard <jbeard4@...>
              wrote:

              > Hi John,
              >
              > Alexis is actually correct, and it's in the spec. See the DOM interfaces
              > to
              > SVGSVGElement versus SVGGElement:
              >
              > http://www.w3.org/TR/SVG/struct.html#InterfaceSVGSVGElement
              > http://www.w3.org/TR/SVG/struct.html#InterfaceSVGGElement
              >
              > SVGGElement extends SVGTransformable, whereas SVGSVGElement does not. His
              > solution is the way I would approach this.
              >
              > Cheers,
              >
              > Jake
              >
              > On Thu, Feb 3, 2011 at 10:17 AM, John Delacour <JD@...> wrote:
              >
              >>
              >>
              >> At 16:16 +0000 31/01/2011, fyrd_svg wrote:
              >>
              >> >SVG elements don't allow the transform attribute and thus cannot be
              >> >directly rotated. Simple workaround to this is to wrap the SVG
              >> >element in a <g> and rotate it. For example:
              >> >
              >> ><g transform="rotate(29.9136, 83, 238.5)">
              >> > <svg></svg>
              >> ></g>
              >>
              >> Unless I'm missing something crucial, that simply is not the case.
              >> Any element can be transformed. It may well be convenient or
              >> desirable to do a part or all or the transformations at <g> level,
              >> but there is no law against transforming any element by itself.
              >> Since the original poster wrote simply "i need help on SVG element
              >> Rotation...", that's all the help he gets for the moment.
              >>
              >> JD
              >>
              >>
              >
              >
              > [Non-text portions of this message have been removed]
              >
              >
              >
              > ------------------------------------
              >
              > -----
              > To unsubscribe send a message to:
              > svg-developers-unsubscribe@yahoogroups.com
              > -or-
              > visit http://groups.yahoo.com/group/svg-developers and click "edit my
              > membership"
              > ----Yahoo! Groups Links
              >
              >
              >

              --
              Erik Dahlstrom, Core Technology Developer, Opera Software
              Co-Chair, W3C SVG Working Group
              Personal blog: http://my.opera.com/macdev_ed
            Your message has been successfully submitted and would be delivered to recipients shortly.