how to make the positions of lines in svg responsive

问题

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.

So for this I trying to use svg however, the position of the line is somehow not responsive. After reading a couple of questions here (like this) and blog posts (like this) I changed all the values to % and also added the viewBox 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:

html:

<div id="a">
This is the nose
</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none">
  <line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/>
  
</svg>
<img src="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" />

css:

#a{
position: absolute;
margin-top: 8%;

}
svg{
  position: absolute;
  z-index:2;
  
}
img{
  margin-left: 20%;
  position:relative;
  z-index:1;
}

Here is a fiddle

Anyone an idea why this is not working?

Is svg the even the right attempt here or should I use something else?

回答1:

SVG viewBox
Making SVGs Responsive with CSS - Tympanus
SVG text and Small, Scalable, Accessible Typographic Designs
SVG image element

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2000 2000" preserveAspectRatio="none">
    <image x="20" y="20" width="132" height="200" xlink:href="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg" />
    <text x="25" y="55" font-family="'Lucida Grande', sans-serif" font-size="32">This is the nose </text>
    <line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/> 
</svg>

回答2:

I found one solution, not sure if this is a good one, please correct me.

First of all I removed the viewBox attribute. Then I made the image also responsive by giving it a relative width and height: auto;. Lastly I also made the font-size responsive in the css through:

body{
 font-size: 12pt;
}
a{
 font-size: 1.5vh; 
}

Works when I resize the browser. Here the fiddle . Please correct me if I'm wrong.

来源：https://stackoverflow.com/questions/39538035/how-to-make-the-positions-of-lines-in-svg-responsive

标签

html

css

svg

responsive-design

position