WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit counter

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


WEB основы

Регистрация на сайте

Дополнительные материалы

CSS векторная графика (SVG)

Обновлено: 26.06.2018 21:59

Масштабируемая векторная графика (SVG)

SVG (Scalable Vector Graphics) - это язык разметки, построенный на основе XML и предназначенный для описания двумерной векторной графики. SVG – это графическое расширение для языка HTML. То, что HTML  делает с текстом, SVG делает с графикой.

SVG похож на фирменную технологию Adobe Flash, но это - текстовый открытый веб-стандарт вместо закрытого двоичного формата. Он разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.

Изображение в формате SVG - это текстовый файл. Этот файл создаётся в формате XML. Поэтому изображения в этом формате можно создавать в текстовом редакторе. 

Часто удобнее создавать такие изображения, использую специальные программы (например - INKSCAPE ) или экспортируя из популярных графических программ (например - Adobe Photoshop).

 

Графические элементы, созданные в формате SVG, можно вставить в HTML страничку разными способами:

 

 

 

  • используя теги img, embed, iframe, object (для вставки изображения из отдельного файла)
  • в любой HTML тег в качестве фона
  • используя тег svg (описание изображения непосредственно в документе)

 

 

 

Синтаксис описания SVG

Теги <svg>, <g>, <defs>

 

Пример


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG 1</title>
<style>
SVG {
height :300px;
width :300px;
border :1px solid black;
}
</style>
</head>
<body>
<svg >
<line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="rgb(255,0,0)"/>
</svg>
<svg>
<polyline points="0,0 100,0 100,100 200,100 200,200 300,200 300,300" fill="rgb(255,0,0)" stroke-width="2" stroke="rgb(0,0,255)"/>
</svg>
<svg>
<rect width="300" height="300" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
<rect width="200" height="200" fill="rgb(255,0,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
<rect width="100" height="100" fill="rgb(0,255,0)" stroke-width="1" stroke="rgb(0,255,0)"/>
</svg>
<svg>
<circle cx="150" cy="150" r="150" fill="rgb(255,255,0)" stroke-width="0" />
<circle cx="150" cy="150" r="100" fill="rgb(0,0,255)" stroke-width="0" />
</svg>
<svg>
<ellipse cx="150" cy="150" rx="150" ry="50" fill="rgb(0,0,255)" stroke-width="1" stroke="rgb(0,255,0)"/>
</svg>
<svg>
<polygon points="0,100 100,100 100,50 300,150 100,250 100,200 0,200" fill="rgb(255,255,0)" stroke-width="1" stroke="rgb(255,0,0)" />
</svg>
</body>
</html>

 

Результат 

 

Базовые формы изображений SVG 

Линия - прямая <line>

Тег рисует прямую линию. Использует параметры:

x1, y1 - координаты начала

x2, y2 - координаты конца

stroke-width - толщина линии

stroke - цвет линии

 

Линия - ломаная  <polyline>

Тег рисует ломаную линию. Использует параметры:

points - массив координат узлов линии

fill - цвет заливки

stroke-width - толщина линии

stroke - цвет линии

 

Прямоугольник <rect>

Тег рисует прямоугольник. Использует параметры:

x, y - координаты прямоугольника 

width - ширина

height - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Круг <circle>

Тег рисует круг. Использует параметры:

cx, cy - координаты центра

r - радиус

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

 

Эллипс <ellipse>

Тег рисует элипс. Использует параметры:

cx, cy - координаты центра

rx - ширина

ry - высота

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Многоугольник <polygon>

Тег рисует многоугольник. Использует параметры:

points - массив координат углов

fill - цвет заливки

stroke-width - толщина линии обводки

stroke - цвет линии обводки

 

Путь <path>

Этот тип формы позволяет нарисовать на экране кривую сложной формы, состоящую из разных участков: отрезков прямых, дуг и тд..

Атрибут d тегв <path> задаёт набор команд рисования:

M - переместить курсор в точку (Move)

L - нарисовать отрезок прямой (Line)

A - нарисовать дугу (Arc)

Q - кривая Безье (Quadratic Bezier Curves)

C - кривая Безье (Cubic Bezier Curves)

Z - замкнуть путь 

 

Например:

<path d="M100,100
L150,100
a50,25 0 0,0 150,100
q50,-50 70,-170
Z"
style="stroke: #006666; fill: none;"/>

 

 

 

Команды, используемые при рисовании линии пути (path)

Каждая команда обозначается буквой, за которой следует набор цифр (параметры команды). Команды, который обозначаются заглавными буквами, обычно используют абсолютные координаты.Сторочными - как координаты, относительно текущего положения карандаша.

Команда Параметры Имя Описание
M x,y moveto Перемещает карандаш в точку с абсолютными координатами x,y без рисования
m x,y moveto Перемещает карандаш на x точек по горизонтали и на y - по вертикали, без рисования
 
L x,y lineto Рисует строку из текущего местоположения пера в указанную точку x, y.
l x,y lineto Рисует прямую от текущего положения до точки x,y относительно текущего положения
 
H x horizontal lineto Draws a horizontal line to the point defined by 
(specified x, pens current y).
h x horizontal lineto Draws a horizontal line to the point defined by 
(pens current x + specified x, pens current y). The x is relative to the current pens x position.
 
V y vertical lineto Draws a vertical line to the point defined by 
(pens current x, specified y).
v y vertical lineto Draws a vertical line to the point defined by 
(pens current x, pens current y + specified y). The y is relative to the pens current y-position.
 
C x1,y1 x2,y2 x,y curveto Draws a cubic Bezier curve from current pen point to x,y. x1,y1 and x2,y2 are start and end control points of the curve, controlling how it bends.
c x1,y1 x2,y2 x,y curveto Same as C, but interprets coordinates relative to current pen point.
 
S x2,y2 x,y shorthand / 
smooth curveto		 Draws a cubic Bezier curve from current pen point to x,y. x2,y2 is the end control point. The start control point is is assumed to be the same as the end control point of the previous curve.
s x2,y2 x,y shorthand / 
smooth curveto		 Same as S, but interprets coordinates relative to current pen point.
 
Q x1,y1 x,y quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. x1,y1 is the control point controlling how the curve bends.
q x1,y1 x,y quadratic Bezier curveto Same as Q, but interprets coordinates relative to current pen point.
 
T x,y shorthand / smooth quadratic Bezier curveto Draws a quadratic Bezier curve from current pen point to x,y. The control point is assumed to be the same as the last control point used.
t x,y shorthand / smooth quadratic Bezier curveto Same as T, but interprets coordinates relative to current pen point.
 
A rx,ry 
x-axis-rotation 
large-arc-flag,
sweepflag 
x,y		 elliptical arc Draws an elliptical arc from the current point to the point x,y. rx and ry are the elliptical radius in x and y direction.
The x-rotation determines how much the arc is to be rotated around the x-axis. It only seems to have an effect when rx and ry have different values.
The large-arc-flag doesn't seem to be used (can be either 0 or 1). Neither value (0 or 1) changes the arc. 
The sweep-flag determines the direction to draw the arc in.
a rx,ry 
x-axis-rotation 
large-arc-flag,
sweepflag 
x,y		 elliptical arc Same as A, but interprets coordinates relative to current pen point.
 
Z   closepath Closes the path by drawing a line from current point to first point.
z   closepath Closes the path by drawing a line from current point to first point.
 

 

 

Текст

 

<text x="20" y="40" style="fill: #000000; stroke: none; font-size: 48px;"> Fill only </text> <text x="20" y="100" style="fill: none; stroke: #000000; font-size: 48px;"> Stroke only </text> <text x="20" y="150" style="fill: #999999; stroke: #000000; font-size: 48px;"> Fill and stroke </text>

 

 

 

Оператор - switch

Этот оператор позволяет использовать разные изображения, в зависимости от языка.

 

 

<switch>
<g systemLanguage="en-UK">
<text x="10" y="20">UK English</text>
</g>
<g systemLanguage="en">
<text x="10" y="20">English</text>
</g>
<g systemLanguage="es">
<text x="10" y="20">Spanish</text>
</g>
</switch>

 

 SVG система координат

В SVG отсчёт координат (точка с координатами х=0, y=0) начинается из левого верхнего угла. Ось y - направление сверху вниз. Ось x - направление слева направо.

 

Единицы измерения

Единица измерения указывается после значения. Например:  10cm или 125mm.

Если единицы измерения не указаны, то имеются в виду пиксели - pixels (px).

Кроме этого допускается использование:

Единица Описание
em Высота букв шрифта по умолчанию.
ex Высота символа - x
px Пиксели
pt Пойнты (1 / 72 дюйма - inch)
pc Picas (1 / 6 дюйма)
cm Centimeters
mm Миллиметры
in Дюймы

Единицы, установленные в элементе <svg> для  атрибутов width и height, влияют только на элемент <svg> (viewport - область просмотра).

Формы, находящиеся  внутри элемента <svg> должны иметь свои собственные единицы.

Если единицы измерения не указаны, то по умолчанию используются пиксели.

 

Размеры форм, размер области их размещения

Область, в которую выводятся SVG - формы, определяется тегом <svg>. Эта область - ViewPort определяется параметрами тега <svg> - width, height и параметром viewPort. 

Если параметра viewBox в теге svg нет, то width и height определяют абсолютные размерый этой области.

Это - абсолютные размеры области видимости форм. И параметры размеров самих форм, которые выводятся на экран тоже абсолютные (x, y, r, cx, cy, ... ).

Например, если задано в теге svg  height :500 и width :200, то на экране выделится для вывода изображений область шириной 200 и высотой 500 пикселей. Если в ней определено: 

<rect   width=50 height=70 fill ="#0b0" stroke-width="1" stroke="#050" />

то внутри области будет нарисован прямоугольник шириной 50 рикселей и высотой - 100.

Параметр viewBox пропорционально меняет размеры всех элементов. Эта область имеет координаты (x, y ) и размеры (ширину, высоту).  Например: viewBox="0 0 50 20". Если для нашего примера задать такой viewBox, то реальные размеры всех элементов увеличется по горизонтали на коэффициент 500/50, а по вертикали - на коэффициент 200/20. То есть реальные размеры прясоугольника будут - 500 на 700 пикселей, а размер вилимой области - 5000 на 2000 пикселей.

 

 

Применение стилей к SVG 

С SVG можно использовать стили как внутри SVG - тегов, так и отдельно описанныа, аналогично HTML стилям.

Примеры:

 

<svg> <rect x="203" width="200" height="200" style="fill:red; stroke:black; stroke-width:3;"/> </svg>

 

<style type="text/css" media="screen"> rect { fill: green; stroke: black; stroke-width: 3; } rect:hover { fill: green; } </style>

 

 

<link rel="stylesheet" type="text/css" href="/style.css">

 

 

<?xml-stylesheet type="text/css" href="/style.css"?>

 

 

Назначение стилей для всех сгруппированных элементов

<g style="fill:blue; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="200" width="200" height="200"/> <circle cx="120" cy="100" r="100"/> </g>

 

 

Анимация SVGs при помощи CSS

<svg> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 60 60" repeatCount="indefinite" /> </rect> </svg>

 

 

 

 

<rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;"> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" /> </rect>

 

 

 

Пример: таймер


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Javascript test1</title>
<script>
var x2, y2, grad, clockFace, secCounter, arrLength// Declare globals
function drawTimer(){
// Init counter
x2=0, y2 = 0, grad = -90, clockFace = 400, secCounter = 0, arrLength = 180

document.getElementById("myTimer").style.width = clockFace + "px";
document.getElementById("myTimer").style.height = clockFace + "px";
document.getElementById("myTimer").style.border = "4px solid red";
document.getElementById("myTimer").style.backgroundColor = "#FFDDDD";
document.getElementById("myTimer").style.borderRadius = "30%";
x1 = clockFace/2;
y1 = clockFace/2;
x2 = arrLength;
y2 = 0;
rad = grad * (Math.PI / 180);
x2 = x1 + Math.cos(rad)*arrLength;
y2 = y1 + Math.sin(rad)*arrLength;
console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2);
// Draw Line
document.getElementById("arrow").setAttribute("x1",x1);
document.getElementById("arrow").setAttribute("y1",y1);
document.getElementById("arrow").setAttribute("x2",x2);
document.getElementById("arrow").setAttribute("y2",y2);
document.getElementById("arrow").setAttribute("stroke-width",2);
document.getElementById("arrow").setAttribute("stroke","#FF0000");
// Draw arrow end point
document.getElementById("arrowEnd").setAttribute("cx",x2);
document.getElementById("arrowEnd").setAttribute("cy",y2);
document.getElementById("arrowEnd").setAttribute("r",4);
document.getElementById("arrowEnd").setAttribute("fill","#FF0000");

document.getElementById("arrowEnd").setAttribute("stroke-width",0);

// Draw arrow start point
document.getElementById("arrowStart").setAttribute("cx",x1);
document.getElementById("arrowStart").setAttribute("cy",y1);
document.getElementById("arrowStart").setAttribute("r",15);
document.getElementById("arrowStart").setAttribute("fill","none");
document.getElementById("arrowStart").setAttribute("stroke","#F00");
document.getElementById("arrowStart").setAttribute("stroke-width",2);

// draw numbers
document.getElementById("out2").setAttribute("x",x1);
document.getElementById("out2").setAttribute("y",y1);
document.getElementById("out2").setAttribute("fill","#FFBBBB");
document.getElementById("out2").setAttribute("font-size",arrLength);


}

function arrowStep(){
// Move arrow once
grad += 1;
secCounter += 1;
rad = grad * (Math.PI / 180);
x2 = x1 + Math.cos(rad)*arrLength;
y2 = y1 + Math.sin(rad)*arrLength;
document.getElementById("arrow").setAttribute("x2",x2);
document.getElementById("arrow").setAttribute("y2",y2);
console.log("x1 = " + x1 + ", y1 = " + y1 + ", x2 = " + x2 + ", y2 = " + y2 + ", angle (degrees) = " + grad);
console.log(secCounter);
// Draw arrow top point

document.getElementById("arrowEnd").setAttribute("cx",x2);
document.getElementById("arrowEnd").setAttribute("cy",y2);
document.getElementById("arrowEnd").setAttribute("r",4);
document.getElementById("arrowEnd").setAttribute("fill","#FF0000");
document.getElementById("arrowEnd").setAttribute("stroke-width",0);
document.getElementById("out2").innerHTML = secCounter;
}
</script>
</head>
<body onload="drawTimer()">
<svg id="myTimer">
<text id = "out2" x="" y="" fill="" font-size="" alignment-baseline="middle" text-anchor="middle">0</text>
<line id="arrow" x1="" y1="" x2="" y2="" stroke-width="" stroke=""/>
<circle id="arrowStart" cx="" cy="" r="" fill="" stroke-width="" />
<circle id="arrowEnd" cx="" cy="" r="" fill="" stroke-width="" />
</svg>

<button onclick = "arrowStep();">Go one step</button>
<button onclick = "int1 = setInterval(arrowStep,1000);">Start timer</button>
<button onclick = "clearInterval(int1);">Stop timer</button>
<button onclick = "drawTimer();">Reset counter</button>

</body>
</html>

 

 

Результат

 

Похожие статьи