如何使 svg 中的线条位置响应 [英] how to make the positions of lines in svg responsive

问题描述

我有一个文本和一个图像，中间有一点边距.我想在图像上的特定点绘制一个箭头.

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

html:

这是鼻子</div><svg xmlns="http://www.w3.org/2000/svg";宽度=100%"高度=100%"viewBox=0 0 2000 2000"；保留AspectRatio =无"><线x1=9%"y1＝9.5%"x2=23%"y2＝6%"标记结束=网址(#triangle)"；笔画=黑色"笔画宽度＝0.2％"/＞</svg><img src="http://www.hickerphoto.com/images/200/little-polar-bear_29287.jpg";/>

CSS:

#a{位置:绝对；保证金最高:8%；}SVG{位置:绝对；z-索引:2；}图片{左边距:20%；位置:相对；z-索引:1；}

这是一个小提琴

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

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

解决方案

SVG viewBox
使用 CSS 使 SVG 具有响应性 - Tympanus
SVG text 和小型、可扩展、可访问的排版设计
SVG 图像元素

<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">这是鼻子</text><line x1="9%" y1="9.5%" x2="23%" y2="6%" marker-end="url(#triangle)" stroke="black" stroke-width="0.2%"/></svg>

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?

解决方案

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 中的线条位置响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！