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>

Answer 2

我找到了一个解决方案，不确定这是不是很好，请纠正我。

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

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

调整浏览器大小时的工作原理。这里是fiddle。如果我错了，请纠正我。

如何使svg中的行位置响应

2 个答案: