CODEWITHSUNDEEP
svg
Schmidko
Schmidko

Reputation: 810

How to position an element in relation to other elements in a svg

I have created an SVG chart with many elements. All elements are positioned in percentage. The reason is that the chart must be scalable. It works fine but some elements like the labels of the axis need positioning in relation to other elements.

In this example I have two vertical lines, the first is at 50% and the second at 60%. I want archive that the second line has always a distance of 10 pixel to the first line. And that for every size of the SVG. That mean when the size of the svg change, the first line stay at 50% and the second line is 10px to the right.

<svg height="100" width="100">
  <line x1="50%" y1="0" x2="50%" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="60%" y1="0" x2="60%" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

I find no way to do this. Hope someone can help me.

Upvotes: 0

Views: 366

Answers (3)

ccprog
ccprog

Reputation: 21821

A general solution to combining relative and absolute units is to nest <svg> elements. For your example, this could be:

body { height: 90vh; }
<svg height="100%" width="100%">
  <svg x="50%" width="10" height="100%" overflow="visible">
    <line x1="0" y1="0" x2="0" y2="100%" style="stroke:rgb(255,0,0);stroke-width:2" />
    <line x1="10" y1="0" x2="10" y2="100%" style="stroke:rgb(255,0,0);stroke-width:2" />
  </svg>
</svg>

Upvotes: 3

enxaneta
enxaneta

Reputation: 33044

A cheap solution to your problem would be using 2 lines one over another, together with vector-effect: non-scaling-stroke; The first line is wider, and the second line is white as the svg background giving the illusion of 2 lines at a distance of a distance of 10 pixel one from each-other.

svg {
  border: 1px solid;
}
line {
  stroke: rgb(255, 0, 0);
  stroke-width: 14;
  vector-effect: non-scaling-stroke;
}
.center {
  stroke-width: 10;
  stroke: white;
}
<svg id="svg" viewBox="0 0 100 100">
  <line x1="50" x2="50" y2="100" />
  <line class="center" x1="50" x2="50" y2="100" />
</svg>

Upvotes: 1

Jucaro
Jucaro

Reputation: 37

Haven't tried but can't you just add margin-left:10px in style attribute? and let x value 50% in both.

Upvotes: -2

Related Questions