1. Forum
  2. USENET
  3. alt.html

  • Placing compound SVG items around coordinate (0,0)

    From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Sat Nov 18 08:53:00 2023
    From Newsgroup: alt.html

    I'm trying to construct a graphical symmetrically composed element -
    say, a compass rose - with <svg> tags in a HTML source context.
    My intention was - to simplify the transformations - to center the
    element around coordinate (0,0). But I have problems even with a
    simple composed graphical element. I had composed a simple element
    placed in one quadrant of the coordinate system with some center
    point (x,y) (where x, y unequal 0) like this:

    +------
    | / \
    | \ /

    but if (for example) I scale that then the _center_ of the composed
    item gets relocated, but I want it persist. (SVG code below.[*])

    So I tried to compose the element around (0,0) as illustrated here:

    /|\
    ---+---
    \|/

    so that scaling and other point-symmetric derivations can be defined
    easily without disturbing that symmetry.

    I've looked for tutorials on the Web but the spare information I
    found was more confusing than helpful to me. - Is there maybe any
    good source you can recommend? Or maybe some small HTML/SVG code
    sample how to center compound graphical items around (0,0)?

    Janis


    [*] Myself I was stuck with using fixed (not (0,0)-centered)
    coordinates like

    <svg id="def" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="600" height="400" viewBox="-200 -100 600 400"
    xlink="http://www.w3.org/1999/xlink"
    style="position: relative; overflow: hidden;
    left: 0px; top: 0px; display: block;">
    <svg>
    <g id="str" transform="scale(0.2)">
    <circle cx="100" cy="100" r="100"/>
    <polygon points=" ... "/>
    </g>
    ...

    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Sun Nov 19 02:58:04 2023
    From Newsgroup: alt.html

    On 18.11.2023 08:53, Janis Papanagnou wrote:
    [...]

    Solved it. - The problem, e.g. that parts of the SVG had got cropped,
    vanished after relocating the viewBox definition from the outer <svg>
    to the inner. (Then the change of cx/cy to 0/0 was effective without
    any visible cropping.)

    Janis


    [*] Myself I was stuck with using fixed (not (0,0)-centered)
    coordinates like

    <svg id="def" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="600" height="400" viewBox="-200 -100 600 400"
    xlink="http://www.w3.org/1999/xlink"
    style="position: relative; overflow: hidden;
    left: 0px; top: 0px; display: block;">
    <svg>
    <g id="str" transform="scale(0.2)">
    <circle cx="100" cy="100" r="100"/>
    <polygon points=" ... "/>
    </g>
    ...


    --- Synchronet 3.21d-Linux NewsLink 1.2