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

Rotate(a x y) with svg2pdf

Expand Messages
  • John Delacour
    I ve written to the author of svg2pdf but while I await an answer perhaps someone here has come across the problem: I have installed the latest version of
    Message 1 of 8 , Dec 26, 2008
      I've written to the author of svg2pdf but while I await an answer
      perhaps someone here has come across the problem:

      I have installed the latest version of Cairo etc and svg2pdf on the
      Mac and simple things so far have worked well, but if I transform an
      object giving the centre of rotation -- transform="rotate(a x y)" --
      not only do I not get any rotation at all but I lose other
      properties, such as fill-colour. If I supply only the angle then
      it's all right, except that I don't get what I want.

      Printing from FireFox and Safari to vector pdf works fine in this
      respect with the same svg files.

      Has anyone any ideas?

      JD
    • G. Wade Johnson
      On Fri, 26 Dec 2008 23:21:56 +0000 ... One trick I learned a while back was to separate the positioning in a group ( tag) around the actual object. Specify
      Message 2 of 8 , Dec 26, 2008
        On Fri, 26 Dec 2008 23:21:56 +0000
        John Delacour <JD@...> wrote:

        > I've written to the author of svg2pdf but while I await an answer
        > perhaps someone here has come across the problem:
        >
        > I have installed the latest version of Cairo etc and svg2pdf on the
        > Mac and simple things so far have worked well, but if I transform an
        > object giving the centre of rotation -- transform="rotate(a x y)" --
        > not only do I not get any rotation at all but I lose other
        > properties, such as fill-colour. If I supply only the angle then
        > it's all right, except that I don't get what I want.
        >
        > Printing from FireFox and Safari to vector pdf works fine in this
        > respect with the same svg files.

        One trick I learned a while back was to separate the positioning in a
        group (<g/> tag) around the actual object.

        Specify the object in its own little coordinate system and then move
        that with the group. For example, if we wanted to place a rectangle
        (30x50) at 100, 50 and rotate it by 30 degrees, you could do this:

        <g transform="translate(100, 50)">
        <rect x="-15" y="-25" width="30" height="50" transform="rotate(30)"/>
        </g>

        Now the positioning and rotation are completely independent. Notice
        that I've selected x and y coordinates that put the center of the
        object at 0,0.

        HTH,
        G. Wade
        --
        No, no, you're not thinking, you're just being logical.
        -- Neils Bohr
      • John Delacour
        ... Thank you. But surely that means I have to use trigonometry to calculate the position of the fulcrum of my object given a rotation about the arbitrary 0,0
        Message 3 of 8 , Dec 27, 2008
          At 23:19 -0600 26/12/08, G. Wade Johnson wrote:

          >On Fri, 26 Dec 2008 23:21:56 +0000
          >John Delacour <JD@...> wrote:
          >
          > > ...but if I transform an
          > > object giving the centre of rotation -- transform="rotate(a x y)" --
          >> not only do I not get any rotation at all but I lose other
          >> properties, such as fill-colour. If I supply only the angle then
          > > it's all right, except that I don't get what I want....
          >
          >One trick I learned a while back was to separate the positioning in a
          >group (<g/> tag) around the actual object.
          >
          >Specify the object in its own little coordinate system and then move
          >that with the group. For example, if we wanted to place a rectangle
          >(30x50) at 100, 50 and rotate it by 30 degrees, you could do this:
          >
          ><g transform="translate(100, 50)">
          > <rect x="-15" y="-25" width="30" height="50" transform="rotate(30)"/>
          ></g>
          >
          >Now the positioning and rotation are completely independent. Notice
          >that I've selected x and y coordinates that put the center of the
          >object at 0,0.

          Thank you. But surely that means I have to use trigonometry to
          calculate the position of the fulcrum of my object given a rotation
          about the arbitrary 0,0 centre, and since my object itself may well
          be positioned by attachment to another object that is itself rotating
          at a different rate and elsewhere centred I can see the script
          becoming quite lengthy and tricky. Perhaps I'm missing something
          obvious.


          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
          <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
          <svg width="800" height="400" transform="translate(50 50)"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:ev="http://www.w3.org/2001/xml-events">
          <g>
          <circle id="CENTRE" cx="350" cy="150" r="2" fill="none" stroke="red" />
          </g>
          <g>
          <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" />
          </g>
          <g transform="translate(0 0)">
          <path d="M350 150 l-300 -50 300 -50 a300 300 1 0 1 0,100"
          fill="green" stroke="darkgreen" opacity="0.5" transform="rotate(0)" />
          </g>
          </svg>



          What I want is to be able to rotate the segment like this:

          <?xml version="1.0" encoding="UTF-8" standalone="no"?>
          <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
          <svg width="800" height="400" transform="translate(50 50)"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:ev="http://www.w3.org/2001/xml-events">
          <g>
          <circle id="CENTRE" cx="350" cy="150" r="2" fill="none" stroke="red" />
          </g>
          <g>
          <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" />
          </g>
          <g>
          <path d="M350 150 l-300 -50 300 -50 a300 300 1 0 1 0,100"
          fill="green" stroke="darkgreen" opacity="0.5" transform="rotate(-45
          350 150)" />
          </g>
          </svg>
        • John Delacour
          ... Yes, I think I was. The following does what I want and translates well to pdf using svg2pdf. Thank you Wade! JD
          Message 4 of 8 , Dec 27, 2008
            At 17:34 +0000 27/12/08,I wrote:

            >...Perhaps I'm missing something obvious.

            Yes, I think I was. The following does what I want and translates
            well to pdf using svg2pdf. Thank you Wade!

            JD



            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
            "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg width="800" height="500" transform="translate(50 50)"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns:ev="http://www.w3.org/2001/xml-events">
            <g id="MAIN" transform="translate(0 200)">
            <circle id="CENTRE" cx="350" cy="150" r="4" fill="none" stroke="magenta" />
            <g>
            <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate()" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(12)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(24)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(36)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(48)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(60)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(72)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(84)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(96)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(108)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(120)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(132)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(144)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(156)" />
            </g>
            <g transform="translate(350 150)">
            <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
            stroke="darkgreen" opacity="0.5" transform="rotate(168)" />
            </g>
            </g>
            </svg>
          • G. Wade Johnson
            On Sat, 27 Dec 2008 18:24:03 +0000 ... Glad to help. One of the things I like about SVG is that there are more than one way to solve some problems. Problems
            Message 5 of 8 , Dec 27, 2008
              On Sat, 27 Dec 2008 18:24:03 +0000
              John Delacour <JD@...> wrote:

              > At 17:34 +0000 27/12/08,I wrote:
              >
              > >...Perhaps I'm missing something obvious.
              >
              > Yes, I think I was. The following does what I want and translates
              > well to pdf using svg2pdf. Thank you Wade!

              Glad to help. One of the things I like about SVG is that there are more
              than one way to solve some problems. Problems that are hard to solve
              with one approach are often trivial if you come at it differently.

              One note, Squiggle complains about the rotate() with no arguments.
              Passing a 0 seems to solve that. The W3C site doesn't appear to be
              responding, so I can't verify who is correct.

              G. Wade

              > JD
              >
              >
              >
              > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
              > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
              > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
              > <svg width="800" height="500" transform="translate(50 50)"
              > xmlns="http://www.w3.org/2000/svg"
              > xmlns:xlink="http://www.w3.org/1999/xlink"
              > xmlns:ev="http://www.w3.org/2001/xml-events">
              > <g id="MAIN" transform="translate(0 200)">
              > <circle id="CENTRE" cx="350" cy="150" r="4" fill="none"
              > stroke="magenta" /> <g>
              > <circle id="ROOT" cx="0" cy="0" r="380" fill="none" stroke="red" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate()" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(12)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(24)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(36)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(48)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(60)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(72)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(84)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(96)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(108)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(120)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(132)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(144)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(156)" />
              > </g>
              > <g transform="translate(350 150)">
              > <path d="m0 0 l-300 -50 300 -50 a300 300 1 0 1 0,100" fill="green"
              > stroke="darkgreen" opacity="0.5" transform="rotate(168)" />
              > </g>
              > </g>
              > </svg>
              >
              >


              --
              Virtual is when it's not but it looks like it is and transparent is
              when it is but it looks like it isn't. -- Rick
              Hoselton
            • Cameron McCormack
              ... Complaining about the missing “0” is acceptable SVG 1.1 behaviour. (In SVG Tiny 1.2 this would cause the @transform to have an “unsupported
              Message 6 of 8 , Dec 27, 2008
                G. Wade Johnson:
                > One note, Squiggle complains about the rotate() with no arguments.
                > Passing a 0 seems to solve that. The W3C site doesn't appear to be
                > responding, so I can't verify who is correct.

                Complaining about the missing “0” is acceptable SVG 1.1 behaviour. (In
                SVG Tiny 1.2 this would cause the @transform to have an “unsupported
                value”, and just be ignored.)

                --
                Cameron McCormack ≝ http://mcc.id.au/
              • John Delacour
                It seems that svg2pdf, using Cairo, balks at anything and gives a bus error. If anyone knows what might be the reason, and a solution, I d be
                Message 7 of 8 , Dec 30, 2008
                  It seems that svg2pdf, using Cairo, balks at <text>anything</text>
                  and gives a bus error. If anyone knows what might be the reason, and
                  a solution, I'd be glad to hear it but in order to get on with things
                  I'm thinking of creating the glyphs as paths in the Perl script and
                  using a subroutine to render the pseudo-text.

                  I've done a fairly long google for anything ready-made in the way of
                  glyph paths but found nothing. If I can save the time it would take
                  to create my own paths, so much the better.

                  JD
                • Frank Bruder
                  ... You could use Apache Batik. Despite its name the rasterizer command line tool does not rasterze when the output content type is set to application/pdf,
                  Message 8 of 8 , Jan 2, 2009
                    --- In svg-developers@yahoogroups.com, John Delacour <JD@...> wrote:
                    >
                    >
                    > It seems that svg2pdf, using Cairo, balks at <text>anything</text>
                    > and gives a bus error. If anyone knows what might be the reason, and
                    > a solution, I'd be glad to hear it but in order to get on with things
                    > I'm thinking of creating the glyphs as paths in the Perl script and
                    > using a subroutine to render the pseudo-text.
                    >
                    > I've done a fairly long google for anything ready-made in the way of
                    > glyph paths but found nothing. If I can save the time it would take
                    > to create my own paths, so much the better.
                    >
                    > JD
                    >

                    You could use Apache Batik. Despite its name the "rasterizer" command
                    line tool does not rasterze when the output content type is set to
                    application/pdf, except for areas with filters or transparency, which
                    can't be done in PDF other than by rasterizing.

                    The only shortcomings of Batik's SVG to PDF conversion I've observed
                    so far are that text is rendered as outlines, not selectable, and
                    copiable text, and links are not reproduced in the PDF.
                  Your message has been successfully submitted and would be delivered to recipients shortly.