Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 4

#1 vla

vla

    Частый гость

    Топикстартер
  • Участник
  • 53
    230 сообщ.

Отправлено 09 Февраль 2012 в 15:09

Посоветуйте пожалуйста 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>
Это изображение круга с фоном, если на него нажать он поменяет цвет. Сделал методом тыка, но вроде работает...
  • 0

Спонсор

#2 Medwoodu

Medwoodu

    Злобный модер

  • суперМодератор
  • 357
    1 418 сообщ.

Отправлено 09 Февраль 2012 в 15:18

Опять изобретение велосипедов.

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

#3 vla

vla

    Частый гость

    Топикстартер
  • Участник
  • 53
    230 сообщ.

Отправлено 09 Февраль 2012 в 15:32

Опять изобретение велосипедов.

Medwoodu, скорее вы правы! У меня нет цели сделать для заказчика страницу/сайт, всё это из любопытства. Думаю меня можно понять...

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

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1004
    3 630 сообщ.

Отправлено 09 Февраль 2012 в 16:25

Я давно хотел написать статью, ибо копал я в эту тему.
Я предпочитаю чистый 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

Может сегодня напишу статейку на эту тему. А может и нет )))
  • 1

#5 vla

vla

    Частый гость

    Топикстартер
  • Участник
  • 53
    230 сообщ.

Отправлено 09 Февраль 2012 в 16:34

Подключаем SVG файл (я предпочитаю мух от котлет отделять, а то дойдет, что и все фотки будем вставлять в base64), созданный в люстре или кореле

Ну, я для ясности в один код всё запихнул... А так - согласен! И спасибо, что озвучил, как достать доступ к файлу SVG с помощью JS.
  • 0



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей