SVG-графика, справочник, информация на русском

Статус
Закрыто для дальнейших ответов.

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Посоветуйте пожалуйста online-справочник, а лучше книгу про SVG-графикук...
Единственное, что я нашел - w3schools.com/svg/default.asp. Но мне очень трудно понять эту информацию. Есть информация на русском языке?

Конечно, я понимаю, что Adobe Illustrator сделает хороший код с векторным рисунком, но у меня появилась необходимость управлять рисунком через JavaScript.

И еще:
Я написал в нужный раздел? Как я понимаю SVG относится к XML, хотя HTML5 тоже поддерживает такую конструкцию:
Код:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<style>
#cir{fill:#333;cx:100;}
</style>
<script>
function f_ff(circle){
circle.style.fill = "#666"
}
</script>
<body>
<svg version="1.1" x="0px" y="0px" width="649px" height="579px" viewBox="-177 -120 649 579" enable-background="new -177 -120 649 579" xml:space="preserve">
  <circle onclick="f_ff(this);" id="cir" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cy="50" r="50"/>
</svg>
</body>
</html>
Это изображение круга с фоном, если на него нажать он поменяет цвет. Сделал методом тыка, но вроде работает...
 

medwoodu

Злобный модер
Регистрация
22.12.2005
Сообщения
1 418
Опять изобретение велосипедов.

Если хотите работать с svg то http://raphaeljs.com/ вам в помощь. На заметку, этот фреймворк используется и ExtJs
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Опять изобретение велосипедов.
[member=Medwoodu], скорее вы правы! У меня нет цели сделать для заказчика страницу/сайт, всё это из любопытства. Думаю меня можно понять...

А про ссылку - спасибо, хотябы буду знать что такое бывает! И там написано теми словати, что я знаю ) Обязательно попробую на практике данный фреймворк.
 

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 138
Я давно хотел написать статью, ибо копал я в эту тему.
Я предпочитаю чистый SVG, чем всякие raphaeljs.

Вкратце выглядит так.
Подключаем SVG файл (я предпочитаю мух от котлет отделять, а то дойдет, что и все фотки будем вставлять в base64), созданный в люстре или кореле
Код:
<embed id="svg" type="image/svg+xml" src="file.svg" height="150" width="150">
Затем делаем обращение к нему следующим образом (так как работаю с jQ, то и писать буду под него)
Код:
$(document).ready(function(){
  $(document.getElementById("svg").getSVGDocument().getElementsByTagName('style')).append('.f0{fill:green}');
});
Тут для примера можно разбить скрипт, для лучшего восприятия
Код:
// Получаем доступ к самому SVG
var var_SVG = document.getElementById("svg").getSVGDocument();
// Получаем стили
// Тут как раз можно получить и другие элементы.
// Так как доступ уже открыли, то работаем с DOM svg как со встроеным.
var var_style = var_SVG.getElementsByTagName('style');
// Добавляем новый стиль, забивая по думу старый.
// Это говновариант, не удаляя старую строку!
$(var_style).append('.f0{fill:green}');
Вот как оно работает http://demo.g63.ru/s...es/get_svg.html

Может сегодня напишу статейку на эту тему. А может и нет )))
 
  • Like
Реакции: vla

vla

Well-Known Member
Регистрация
16.09.2011
Сообщения
230
Подключаем SVG файл (я предпочитаю мух от котлет отделять, а то дойдет, что и все фотки будем вставлять в base64), созданный в люстре или кореле
Ну, я для ясности в один код всё запихнул... А так - согласен! И спасибо, что озвучил, как достать доступ к файлу SVG с помощью JS.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ