Question 167405 in Html Question posted in
Some basic documentation can be found here.

Html – Scale coordinate system of SVG

How can I change the coordinate system of a SVG, in particular scale the y-axis, without also scaling the circles (which would make them ellipses), texts (which would distort them) and other elements?

Here is an example:

<svg
    viewBox="0 0 10 10"
    width="400px"
    style="border: 1px solid teal"
>
    <circle cx="0" cy="0" r="0.5" fill="black"></circle>
    <circle cx="10" cy="0" r="0.5" fill="black"></circle>
    <circle cx="0" cy="10" r="0.5" fill="black"></circle>
    <circle cx="10" cy="10" r="0.5" fill="black"></circle>
</svg>

This draws a SVG with a coordinate system of (0,0) to (10,10) of size 400px times 400px, and four circles in the corners.

How can I change this SVG so that it is of size 400px times 200px, but however the circles stay in the corners (and remain their shape as circles)?

The following does not work.

<svg
    viewBox="0 0 10 10"
    width="400px"
    height="200px"
    style="border: 1px solid teal"
>
    <circle cx="0" cy="0" r="0.5" fill="black"></circle>
    <circle cx="10" cy="0" r="0.5" fill="black"></circle>
    <circle cx="0" cy="10" r="0.5" fill="black"></circle>
    <circle cx="10" cy="10" r="0.5" fill="black"></circle>
</svg>

The following does not work either.

  <svg
    viewBox="0 0 10 10"
    width="400px"
      transform="scale(1,0.5)"
    style="border: 1px solid teal"
  >
    <circle cx="0" cy="0" r="0.5" fill="black"></circle>
    <circle cx="10" cy="0" r="0.5" fill="black"></circle>
    <circle cx="0" cy="10" r="0.5" fill="black"></circle>
    <circle cx="10" cy="10" r="0.5" fill="black"></circle>
  </svg>

I have also tried some other things, but without luck so far.

This is how it should look like in the end, but I would like to prevent adjusting all the individual coordinates of my SVG and its elements.

    <svg
        viewBox="0 0 10 5"
        width="400px"
        style="border: 1px solid teal"
    >
        <circle cx="0" cy="0" r="0.5" fill="black"></circle>
        <circle cx="10" cy="0" r="0.5" fill="black"></circle>
        <circle cx="0" cy="5" r="0.5" fill="black"></circle>
        <circle cx="10" cy="5" r="0.5" fill="black"></circle>
    </svg>
Tags:

3

Answers


  1. 0

    if I understand well your question…
    don’t put any width for the svg
    enclose your svg with your viewbox inside a div which has width, changing div width scale the svg.

    .square400x400 {
  width: 400px;
}

.square200x200 {
  width: 200px;
}
    <div class="square400x400">
  <svg viewBox="0 0 10 10" style="border: 1px solid teal">
        <circle cx="0" cy="0" r="0.5" fill="black"></circle>
        <circle cx="10" cy="0" r="0.5" fill="black"></circle>
        <circle cx="0" cy="10" r="0.5" fill="black"></circle>
        <circle cx="10" cy="10" r="0.5" fill="black"></circle>
    </svg>
</div>

<div class="square200x200">
  <svg viewBox="0 0 10 10" style="border: 1px solid teal">
        <circle cx="0" cy="0" r="0.5" fill="black"></circle>
        <circle cx="10" cy="0" r="0.5" fill="black"></circle>
        <circle cx="0" cy="10" r="0.5" fill="black"></circle>
        <circle cx="10" cy="10" r="0.5" fill="black"></circle>
    </svg>
</div>
    Login or Signup to reply.
  2. 0

    If your main goal is to keep the circles in the corners, you might just use percentage based units.

    <svg width="400px" height="100px" style="border: 1px solid teal">
  <circle cx="0" cy="0" r="20" fill="black"></circle>
  <circle cx="100%" cy="0" r="20" fill="black"></circle>
  <circle cx="0" cy="100%" r="20" fill="black"></circle>
  <circle cx="100%" cy="100%" r="20" fill="black"></circle>
</svg>

<svg width="400px" height="200px" style="border: 1px solid teal">
  <circle cx="0" cy="0" r="20" fill="black"></circle>
  <circle cx="100%" cy="0" r="20" fill="black"></circle>
  <circle cx="0" cy="100%" r="20" fill="black"></circle>
  <circle cx="100%" cy="100%" r="20" fill="black"></circle>
</svg>

<svg width="100%" height="200px" style="border: 1px solid teal">
  <circle cx="0" cy="0" r="20" fill="black"></circle>
  <circle cx="100%" cy="0" r="20" fill="black"></circle>
  <circle cx="0" cy="100%" r="20" fill="black"></circle>
  <circle cx="100%" cy="100%" r="20" fill="black"></circle>
</svg>

    In the above example the viewBox is removed to get a fluid layout adapting to any height or width.

    Login or Signup to reply.
  3. 0

    a <polyline> or <path> do not take percentages

    a <rect> can not have a <marker>

    a <line> does take percentages and can display a <marker>

    <svg width="500px" height="180px">
  <defs>
    <marker id="circle" viewBox="0 0 2 2" refX="1" refY="1"
            markerWidth="80" markerHeight="80">
      <circle cx="1" cy="1" r="1" fill="red" />
    </marker>
  </defs>
  <g stroke="green" marker-end="url(#circle)" >
    <line x2="100%" />  
    <line x1="100%" x2="100%" y2="100%"/>  
    <line x1="100%" y1="100%" y2="100%" />  
    <line y1="100%" />  
  </g>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search