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

Question

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

为此，我尝试使用 svg 但是，线条的位置不知何故没有响应。在阅读了这里的几个问题(如 this )和博客文章(如 this )后，我将所有值更改为 % 并添加了 viewBox 属性但是由于某种原因，箭头仅在我当前浏览器屏幕 1920x1200 的正确位置。如果我调整浏览器窗口的大小，箭头的位置不正确。我的代码:

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

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>