how to make the positions of lines in svg responsive
<p>I have a text and an image side by side with a little margin in the middle. I want to draw an arrow to a specific point on the image.</p>
<p>So for this I trying to use <code>svg</code> however, the position of the line is somehow not responsive. After reading a couple of questions here (like <a href="https://stackoverflow.com/questions/30717551/how-to-make-svg-responsive">this</a>) and blog posts (like <a href="https://css-tricks.com/scale-svg/" rel="nofollow noreferrer">this</a>) I changed all the values to <code>%</code> and also added the  <code>viewBox</code> attribute But for some reason the arrow is only in the correct position with my current browser screen 1920x1200. If I resize the browser window the arrow is at an incorrect position. My code:</p>
<p>html:</p>
<pre><code>&lt;div id=&quot;a&quot;&gt;
This is the nose
&lt;/div&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 2000 2000&quot; preserveAspectRatio=&quot;none&quot;&gt;
  &lt;line x1=&quot;9%&quot; y1=&quot;9.5%&quot; x2=&quot;23%&quot; y2=&quot;6%&quot; marker-end=&quot;url(#triangle)&quot; stroke=&quot;black&quot; stroke-width=&quot;0.2%&quot;/&gt;
  
&lt;/svg&gt;
&lt;img src=&quot;http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg&quot; /&gt;
</code></pre>
<p>css:</p>
<pre><code>#a{
position: absolute;
margin-top: 8%;

}
svg{
  position: absolute;
  z-index:2;
  
}
img{
  margin-left: 20%;
  position:relative;
  z-index:1;
}
</code></pre>
<p>Here is a <a href="https://jsfiddle.net/o2fphns4/1/" rel="nofollow noreferrer">fiddle</a></p>
<p>Anyone an idea why this is not working?</p>
<p>Is svg the even the right attempt here or should I use something else?</p>