Your avatar Гость
Войти Регистрация
HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
23 Июня 2011 в 23:45:25
19:17:35
Фигуры в SVG

Вспоминаем

Продолжаем изучать SVG. На этот раз у нас - простые фигуры. То бишь примитивы.

  • <rect> - это прямоугольник. Есть след. атрибуты:
    • x, y - координаты левого верхнего угла.
    • width, height - размеры.
    • rx, ry - степень скругления углов, от radius x, radius y. Максимальное значение - половина от ширины и высоты соответственно.
    • Code
    <rect x="10" y="10" width="300" height="200" />
  • <circle> - круг. Атрибуты:
    • cx, cy - координаты центра окружности.
    • r - радиус окружности.
    • Code
    <circle cx="300" cy="300" r="100" />
  • <ellipse> - эллипс. В отличие от круга, можно задавать радиус ширины и высоты. Атрибуты:
    • cx, cy - координаты центра окружности.
    • rx, ry - радиусы эллипса.
    • Code
    <ellipse cx="300" cy="300" rx="150" ry="100" />
  • <line> - линия. Обязательно задавать атрибут stroke (см. ниже). Атрибуты:
    • x1, y1 - координаты первой точки линии.
    • x2, y2 - координаты второй точки линии.
    • Code
    <line x1="10" y1="10" x2="40" y2="40" stroke="black"/>
  • <polyline> - фигура из линий. Проще говоря, несколько линий, соединённых конец с началом. Атрибуты:
    • points - координаты точек. Указываются в формате "x1,y1 x2,y2 x3,y3 x4,y4"
    • Code
    <polyline points="10,10 100,200 100,102" fill="red" stroke="blue"/>
  • <polygon> - то же самое, что и polyline, только последняя точка всегда соединяется с первой.
    • Code
    <polygon points="10,10 100,200 100,102" fill="red" stroke="blue" stroke-width="3"/>
  • Глобальные атрибуты - у всех примитивов также есть глобальные атрибуты:
    • fill - цвет заливки. Возможно значение none.
    • stroke - цвет границы (типа border). Возможно значение none.
    • Code
    <rect x="10" y="10" width="200" height="200" fill="#fcc" stroke="#aaf"/>

Практика

Немножко поизучали, теперь давайте и интересное что-нить нарисуем. И скриптов! Скриптов побольше.

Code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg width="2000" height="1000" xmlns="http://www.w3.org/2000/svg" version="1.1">    <circle cx="190" cy="190" r="100" fill="#aaf"/>  <rect x="10" y="10" width="200" height="200" fill="#fcc" stroke="#aaf" stroke-width="3"/>  <circle cx="200" cy="200" r="100" fill="#fcc"/>    <script>  var fnc=function(e){  document.getElementsByTagName('rect')[0].setAttribute('fill', '#fdd');  document.getElementsByTagName('circle')[1].setAttribute('fill', '#fdd');  }  var fnc2=function(e){  document.getElementsByTagName('rect')[0].setAttribute('fill', '#fcc');  document.getElementsByTagName('circle')[1].setAttribute('fill', '#fcc');  }  var fnc3=function(e){  document.getElementsByTagName('rect')[0].setAttribute('fill', '#fbb');  document.getElementsByTagName('circle')[1].setAttribute('fill', '#fbb');  }      document.getElementsByTagName('rect')[0].addEventListener('mouseover', fnc, false);  document.getElementsByTagName('circle')[1].addEventListener('mouseover', fnc, false);    document.getElementsByTagName('rect')[0].addEventListener('mouseout', fnc2, false);  document.getElementsByTagName('circle')[1].addEventListener('mouseout', fnc2, false);    document.getElementsByTagName('rect')[0].addEventListener('mousedown', fnc3, false);  document.getElementsByTagName('circle')[1].addEventListener('mousedown', fnc3, false);    document.getElementsByTagName('rect')[0].addEventListener('mouseup', fnc, false);  document.getElementsByTagName('circle')[1].addEventListener('mouseup', fnc, false);  </script>  </svg>

Z-index

Есть один момент. Фигуры могут накладываться друг на друга. В данном случае каждая фигура позиционируется как position:absolute в html-документе и с z-index:auto. То есть, каждая новая фигура распологается поверх всех ранее созданных.

Группы элементов

Также в svg есть тег групп - <g> (от англ. group). Мы можем поместить туда любые элементы. А css-стили группы наследуются для всех её элементов. Да, CSS! Он есть и в SVG. Впрочем, это уже другая статья.

Просмотров: 2578 | | Теги: Polyline, Circle, Прямоугольник, фигуры, figures, ellipse, Rect, Polygon, svg, line
Всего комментариев: 1
1 Victor (03 Сентября 2011 19:36:21) 0  
Жду продолжения :).
 Спам
Материал |
Имя *:
Email:
Код *: