У маски только один обязательный параметр, её ID, с помощью которого она ассоциируется с объектом, к которому применена. Остальные параметры x, y, width и height опциональны.
Маски обладают широкими возможностями для изменения, украшения и анимирования растровыx и векторныx изображений.
Во первых они могут обрезать изображения, по заданной форме как clipPath
Но в отличии от clipPath маска не только вырезает, но и есть у неё возможность оформить оставшуюся часть изображения с помощью непрозрачности. Как в примере выше.
В теги mask можно добавить один или несколько элементов svg: line, circle, ellipse, rect, polyline, polygon, path
Присваивая этим элементам различные цвета заполнения можно получать участки изображения с разной непрозрачностью. Продолжить чтение →
Когда файл SVG добавлен на страницу HTML с помощью тега <img>, то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы.
Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG.
Цвет SVG фильтра можно установить любой. В примере ниже изображение будет покрашено в синий цвет
Для осуществления анимационных эффектов, связанных с вращением, увеличением фигур из центра, необходимо точно знать координаты центра вращения, а так же, в некоторых случаях, и длину периметра фигур. Рассмотрим правильные многоугольники: пятиугольник, шестиугольник, восьмиугольник и т.д. Ниже приведен пример шестиугольника, но все параметры, расчетные формулы одинаковы для любого правильного многоугольника, меняется только “n”
С – длина стороны многоугольника
n – число сторон
R – радиус описанной окружности
r – радиус вписанной окружности Формулы расчета: C = 2*R*sin(180°/n) = 2*r*tg(180°/n) R = (c/2)/sin(180°/n) = r/cos(180°/n) r = (c/2)*ctg(180°/n) = R*cos(180°/n)
Для вычисления центра вращения нужно, как-то определить заранее, хоть один параметр, например – длину стороны многоугольника – “C”.
Это можно сделать несколькими способами:
Вычисление длины одной из сторон правильного многоугольника
Первая группа цифр после команды M (moveto) – M48.9 60.9 определяет координаты начальной (зеленой) точки стороны многоугольника. Вторая группа цифр – координаты конечной (синей) точки – 16.9 60.9 Вычисляем длину горизонтальной стороны многоугольника – C = 48.9 – 16.9 = 32px
Вычисляем радиус описанной окружности шестиугольника: R = (c/2)/sin(180°/n), где n=6 R = 16/sin(30°) = 32px
для шестиугольника – R = C
Вычисление центра вращения шестиугольника
Радиус вписанной окружности: r = R*cos(180°/n) = 32*cos(30°) = 27.71px
Для определения центра вращения шестиугольника необходимо расчитать параметры Cx, Cy. Cx = 16.9 + С/2 = 32.9;
Cy = 60.9 – r = 60.9 – 27.71 = 33.19px;
Проверяем:
Начальная точка (зелёная) отрисовки пятиугольника имеет координаты – M38.8 31.3, далее по часовой стрелке, следующая вершина пятиугольника – 69.4 53.6
Как и в примере с шестиугольником, легче всего вычислить длину горизонтальной стороны многоугольника (зелёная и жёлтая точки) – С = 57,6 – 19,7 = 37,9
Но это частный случай, когда сторона многоугольника паралелльна одной из осей ординат. В большинстве случаев сторона многоугольника идет под углом к осям ординат. Вычислим длину наклонной стороны, используя теорему Пифагора – с2 = a2 + b2 На рисунке это треугольник с жёлтыми точками на вершинах. Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, поэтому
a = 89.5 – 53.6 = 35.9 – из нижней точки вычитаются координаты “y” верхней точки
b = 69.4 – 57.6 = 11.8 – вычитаются координаты “x” двух вершин треугольника c = √ 35.92 + 11.82 = 37.78
Определение радиусов вписанной и описанной окружностей по формулам из таблицы ниже
R = 0,851*C = 32.16px – радиус описанной вокруг пятиугольника окружности r = 0688*C =26.0px – радиус вписанной в пятиугольник окружности
Определение координат центра вращения пятиугольника
Cx = 19.7 + C/2 = 19.7 +18.9 = 38.6px Cy = 31.3 + R = 31.3 + 32.16 = 63.46px
Проверяем вычисленные центры вращения для пятиугольника и шестиугольника. Анимация начинается при наведении курсора мышки.
Первая и вторая картинка вращаются пока наведен курсор мышки. Третья картинка – увеличение. Четвертая – вращение и одновременное увеличение размеров изображения.
Таблица для вычисления параметров правильных многоугольников
