Мне нужно нарисовать букву Z
на SVG для иконки.
<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 32 32">
<path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0
0 1 2-2z" fill="#e35604"></path>
<path d="БУКВА Z"></path>
</svg>
Чтобы получить такую иконку:
Ответ @Air правильный, красивый и будет полезен в любом случае.
Но, так как символ Z
нарисован двойным контуром, будет невозможно сделать анимацию рисования буквы по всей ширине строки.
Стрелками показаны узловые точки.
Чтобы нарисовать одиночный контур нужно выбирать в векторном редакторе инструмент - Рисовать кривые Безье и прямые линии
- Shift+F6
Чтобы убрать из файла SVG лишнюю информацию, которую сохраняет векторный редактор необходимо оптимизировать файл с помощью любого оптимизатора, например - SVG EDITOR
Как пользоваться оптимизатором - подробно, на примерах
Другие оптимизаторы
На выходе получаем код:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" >
<!-- Прямоугольник с закругленными углами -->
<path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0
0 1 2-2z" fill="#D94937"></path>
<!-- Символ Z -->
<path d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white"/>
</path>
</svg>
Чтобы сделать SVG адаптивным ширину и высоту холста SVG нужно указывать в процентах
width="15%" height="15%"
"Z"
Полная длина контура буквы равна 70px
Анимация рисования линии достигается изменением stroke-dashoffset
от максимума до нуля values="70;0"
<svg xxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" style="fill:">
<!-- Прямоугольник с закругленными углами -->
<path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0
0 1 2-2z" fill="#D94937"></path>
<!-- Символ Z -->
<path stroke-dasharray="70" stroke-dashoffset="70" d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white">
<animate
attributeName="stroke-dashoffset"
values="70;0;0"
dur="2s"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>
Вариант рисования - туда-обратно
<svg xxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15%" height="15%" viewBox="0 0 32 32" version="1.1" style="fill:">
<!-- Прямоугольник с закругленными углами -->
<path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0
0 1 2-2z" fill="#D94937"></path>
<!-- Символ Z -->
<path stroke-dasharray="70" stroke-dashoffset="70" d="M6.5 4.3H25.9v2.3l-18 19.1 0 2.2 19.4 0" style="fill:none;stroke-width:4;stroke:white">
<animate
attributeName="stroke-dashoffset"
values="70;0;0;70;70"
dur="5s"
fill="freeze"
repeatCount="indefinite" />
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
<path fill="#e35604" d="M385,400H15c-8.3,0-15-6.7-15-15V15C0,6.7,6.7,0,15,0h370c8.3,0,15,6.7,15,15v370
C400,393.3,393.3,400,385,400z"/>
<path fill="white" d="M50,50 350,50 350,100 150,300 350,300 350,350 50,350 50,300 250,100 50,100z" />
</svg>
Такое элементарно строится "by hand" - по точкам:
d="M-12,-12 h23 L-12,12 h23"
path {
animation: 2s fill;
}
@keyframes fill{
from {stroke-dasharray: 0 100}
to {stroke-dasharray: 100 100}
}
<svg viewbox=-20,-20,40,40 height=100px width=100px>
<rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect>
<path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none
stroke-miterlimit=2 stroke-width=5></path>
</svg>
<svg viewbox=-20,-20,40,40 height=100px width=100px>
<rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect>
<path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none
stroke-linejoin=round stroke-linecap=round
stroke-width=5></path>
</svg>
<svg viewbox=-20,-20,40,40 height=100px width=100px>
<defs><mask id=mask>
<rect x=-12 y=-15 width=24 height=30 fill=white></rect>
</mask></defs>
<rect x=-17 y=-17 width=34 height=34 rx=5 fill=orange></rect>
<path d="M-12,-12 h23 L-12,12 h23" stroke=white fill=none
stroke-width=5 mask=url(#mask)></path>
</svg>
Так ?
<svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="10" fill="#d94937" />
<text x="25" y="75" style="font-family:sans-serif;font-weight:900;font-size:100px;fill:#fff;"> z </text>
</svg>
Update
Дополнительные пояснения по комментариям
Хватило бы 4 узловых точек для начертания "Z"
Но в этом случае невозможно сделать вертикальную обрезку, как в образце автора вопроса
Поэтому я добавил две дополнительные точки, сменил их тип на - сделать выделенные узлы автоматически сглаженные
И перемещая рычаги управления этих узловых точек добился вертикального среза
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
на сайте есть select там всего 2 пункта нужно убрать стрелки вниз вверх
У меня есть массив из символов: char cif[] = { '0','1','2','3','4','5','6','7','8','9', ',','', '/', ';'};