CODEWITHSUNDEEP
javascripthtmlcsssvg
Slasher
Slasher

Reputation: 618

How to select SVG line xy coordinates using css?

I there any possible way to change/select SVG xy coordinates using css? For example: 

 <svg class="line line-1" width="700" height="500">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
 </svg>

I want to change xy coordinates whit media query in css.

Upvotes: 2

Views: 1938

Answers (1)

Temani Afif
Temani Afif

Reputation: 273086

You can apply a translation with CSS to change the coordinates of your line. Here is an example where I made the line to start from (0,0):

svg {
  background:red;
}
svg line {
  transform:translate(-120px,-330px);
}
 <svg class="line line-1" width="700" height="500">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
 </svg>

And if you will have many elements you can group them inside a g orn where you apply the needed transformation as you can also consider rotation, scale, etc:

svg {
  background: red;
}

svg g.coord {
  transform: translate(-120px, -330px);
}
<svg class="line line-1" width="700" height="500">
<g class="coord">
    <line x1="120" y1="330" x2="1000" y2="750" stroke="#ffffff"/>
    <line x1="120" y1="330" x2="300" y2="650" stroke="blue"/>
    <line x1="120" y1="330" x2="180" y2="650" stroke="green"/>
</g>
</svg>

Upvotes: 4

Related Questions