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

【问题标题】：how to make the positions of lines in svg responsive如何使svg中的线条位置响应
【发布时间】：2017-01-25 01:39:46
【问题描述】：

我有一个文本和一个图像并排，中间有一点边距。我想在图像上的特定点上画一个箭头。

因此，为此我尝试使用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 是否是正确的尝试，还是我应该使用其他东西？

【问题讨论】：

标签： html css svg responsive-design position

【解决方案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>

【讨论】：

所以这意味着只有当我在 SVG 中“绘制”所有内容时它才有效？没有别的办法吗？
我认为这是最简单的方法。在 adobe illustrator 中绘制所有内容，然后导出为SVG 文件。我使用这个工作流程制作了一些 SVG 项目，即多边形风格的城市景观：codepen.io/smalinux/pen/yJwJjm/left。我的 SVG 工作流程：youtube.com/watch?v=06atTvwkuJE

【解决方案2】：

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

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

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

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

【讨论】：