Можно ли нарисовать линию поверх изображения SVG? - PullRequest
Новая
       32

Можно ли нарисовать линию поверх изображения SVG?

1 голос
/ 07 июля 2011

Возможно ли в области HTML / CSS программно нарисовать линию поверх изображения SVG?

Спасибо

Редактировать: Что у меня есть до сих пор - 

<html>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="10" x2="1000" y2="300" style="stroke:#006600; stroke-width:15"/>
    <line x1="300" y1="0" x2="0" y2="300" style="stroke:#006600; stroke-width:15"/>
    <embed src="logo.svg" width="1000" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</svg>

Редактировать: Линия может быть нарисована во время загрузки (т.е. нет необходимости в JavaScript). Кроме того, линия может быть горизонтальной, вертикальной или под углом, таким как диагональ, и не обязательно должна быть сложной формы.

Ответы [ 3 ]

2 голосов
/ 07 июля 2011

Да, нет причин, почему нет.

SVG - формат векторной графики в XML; было бы просто добавить дополнительный элемент к существующему чертежу SVG, который рисует линию.

Поскольку он находится в документе DOM, вы также можете нарисовать линию, используя отдельное изображение SVG, или даже просто элемент HTML <div> с рамкой или заполненным фоном, если вам нужна только горизонтальная или вертикальная линия.

Ваш вопрос довольно короток о деталях того, чего вы пытаетесь достичь. Если строка должна быть добавлена ​​во время загрузки страницы, она может быть очень легко включена в существующий документ. Если его нужно нарисовать после загрузки страницы, это нужно сделать с помощью Javascript.

Если вам нужно использовать Javascript, я бы порекомендовал заглянуть в библиотеку Raphael , поскольку она делает рисование SVG-графики в вашем браузере очень простым. (он также имеет запасной режим рисования в VML для более старых версий IE, поэтому он очень совместим с браузерами).

Надеюсь, это поможет.

1 голос
/ 07 июля 2011

Вы можете использовать DIV и стилизовать его как линию (позиционирование, высота 1pt и т. Д.). Но если у вас есть SVG, почему бы вам не нарисовать линию в SVG?

0 голосов
/ 07 июля 2011

Учитывая, что изображения SVG состоят только из специализированных тегов XML, я не понимаю, почему вы не можете добавить теги для одного SVG на страницу DOM, наложенную на первое изображение SVG, используя JavaScript, или даже просто изменить копиюоригинальный SVG загружен в DOM на странице.Однако это пока невозможно, так как кажется, что вы не можете помещать теги для SVG-содержимого непосредственно в файл HTML.

Возможно, вы также можете использовать тег HTML5 <canvas>.

...