如何使 svg 中的线条位置响应

Question

我有一个文本和一个图像并排放置，中间有一点空白。我想画一个箭头指向图像上的特定点。

所以为此我尝试使用 svg 但是，该行的位置不知何故没有响应。在这里阅读了几个问题后（比如 ) and blog posts (like this），我将所有值更改为 % 并添加了 viewBox 属性但是由于某种原因，箭头只在我的正确位置当前浏览器屏幕 1920x1200。如果我调整浏览器 window 箭头的位置不正确。我的代码：

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;
}

这是一个fiddle

有人知道为什么这不起作用吗？

svg 在这里是正确的尝试还是我应该使用其他东西？

Answer 1

我找到了一个解决方案，不知道这个是否好，请指正。

首先我删除了 viewBox 属性。然后我通过给它一个相对宽度和 height: auto; 使图像也响应。最后，我还通过 css 使字体大小响应：

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

在我调整浏览器大小时有效。这里是 fiddle 。如果我错了，请纠正我。

Answer 2

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>

如何使 svg 中的线条位置响应

how to make the positions of lines in svg responsive

html

css

svg

position

responsive-design