Как сделать позиции строк в svg отзывчивом

У меня есть текст и изображение рядом с небольшим отрывом в середине. Я хочу нарисовать стрелку к определенной точке изображения.Как сделать позиции строк в svg отзывчивом

Так что для этого я пытаюсь использовать 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 даже правильной попыткой здесь или я должен использовать что-то еще?

источник

2016-09-16 Tom

Пожалуйста, вы можете объяснить вниз голосование? – Tom

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>

источник

2016-09-17 08:07:17

, так это значит, что он работает только тогда, когда я «рисую» все в SVG? Другого пути нет ? – Tom

Я думаю, что это самый простой способ. Нарисуйте все в Adobe Illustrator, Затем экспортируйте файл 'SVG'. Я сделал некоторые из проектов SVG, используя этот рабочий процесс, т. Е. Городской ландшафт в многоугольном стиле: http://codepen.io/smalinux/pen/yJwJjm/left/. Мой рабочий процесс SVG: https: //www.youtube.com/watch? V = 06atTvwkuJE –

Я нашел одно решение, не уверен, что это хороший, пожалуйста, исправьте меня.

Прежде всего, я удалил атрибут viewBox. Затем я сделал изображение также отзывчивым, придав ему относительную ширину и height: auto;. Наконец, я также сделал размер шрифта отзывчивым в CSS через:

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

работ при изменении размера браузера. Здесь fiddle. Пожалуйста, поправьте меня, если я ошибаюсь.

источник

2016-09-16 22:29:59 Tom

Как сделать позиции строк в svg отзывчивом

ответ

Смежные вопросы