SVG. Рисуем рожицу

Для рисования будем использовать сайт JSFiddle.

В секции HTML напишем первый код.

<svg height="400" width="400">
</svg>

Пока это только заготовка, но если нажать кнопку Run, то секция Result закрасится белым цветом.

Для рожицы нам понадобится жёлтый круг. Нарисуем его с помощью circle.

<circle cx="200" cy="200" r="150" fill="yellow"/>

Нарисуем два чёрных глаза.

  <circle cx="130" cy="200" r="20" fill="black"/>
  <circle cx="270" cy="200" r="20" fill="black"/>

Красный рот нарисуем при помощи траектории path:

<path d="M 130,280 l 150,0" stroke="red" stroke-width="3" />

Небольшие пояснения к числам в атрибуте d, в котором указаны координаты. Сначала мы перемещаемся (M - move) в точку 130,280. Затем рисуем линию от этой точки в точку, используя относительные координаты (команды в нижнем регистре указывают на относительные координаты). В нашем примере мы двигаемся от первой точки строго вправо на 150 единиц. Если использовать абсолютные координаты, то можно было написать L 280,280.

Прямой рот заменим на улыбку.

<path d="M 130,280 q 75,50 150,0" stroke="red" stroke-width="3" fill-opacity="0" />

Вместо прямой линии (l - line), мы используем кривую Безье (q), которая требует две координаты. Вторая координата совпадает с координатами из прошлого примера. А первая показывает искажение линии. Линия должна пройти через данную точку, образовав весёлую улыбку. Для этого выбираем центр по горизонтали и смещение по вертикали вниз.

Атрибут fill-opacity позволяет скрыть чёрную область в области рта.

Чтобы взаимодействовать с элементами объекта, присвоим им идентификаторы.

<circle cx="200" cy="200" r="150" fill="yellow" id="faceShape" />

<circle cx="130" cy="200" r="20" fill="black" id="leftEye" />
<circle cx="270" cy="200" r="20" fill="black" id="rightEye" />

<path d="M 130,280 q 75,50 150,0" stroke="red" stroke-width="3" fill-opacity="0" id="mouth" />

Теперь мы можем обращаться к отдельным элементам по идентификатору. В секции JavaScript пишем код - создаём переменную для рожицы.

var faceShape = document.getElementById("faceShape");

Заставим выводить сообщение при щелчке.

faceShape.onclick = function(){
  alert("Meow!")
}

Если код заработал, то двигаемся дальше. Заменим вызов сообщения на изменение цвета рожицы.

faceShape.setAttribute("fill", "#A0D468");

Код срабатывает один раз, что не очень удобно. Сделаем условие, чтобы при повторном щелчке возвращаться в исходное состояние.

if (isSick === true) {
  faceShape.setAttribute("fill", "#FFCE54");
  isSick = false;
} else {
  faceShape.setAttribute("fill", "#A0D468");
  isSick = true;
}

Готово!

Полностью код.

HTML

<svg height="400" width="400">
  <circle cx="200" cy="200" r="150" fill="#FFCE54" id="faceShape" />

  <circle cx="130" cy="200" r="20" fill="black" id="leftEye" />
  <circle cx="270" cy="200" r="20" fill="black" id="rightEye" />
  
  <!-- <path d="M 130,280 l 150,0" stroke="red" stroke-width="3" /> -->
  <path d="M 130,280 q 75,50 150,0" stroke="red" stroke-width="3" fill-opacity="0" id="mouth" />
</svg>

JavaScript

var faceShape = document.getElementById("faceShape");
var isSick = false;

faceShape.onclick = function() {
  //alert("Meow!")
  //faceShape.setAttribute("fill", "#A0D468");

  if (isSick === true) {
    faceShape.setAttribute("fill", "#FFCE54");
    isSick = false;
  } else {
    faceShape.setAttribute("fill", "#A0D468");
    isSick = true;
  }
}

На основе статьи Making Emojis with Code – Danielle Emma Vass – Medium.

Вернуться в раздел SVG

Реклама