Разделить один объект svg на 2

Question

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z"/></svg>

Кто нибудь умеет работать с svg, хотела попросить помочь. Разделить крестик на два слеша, так чтобы визуально оставался крестиком. Просто из двух объектов...

Answer 1

В коде в вопросе рисуется контур, который потом закрашивается. В контуре можно отметить несколько сегментов

прямые - отвечают за длину сторон креста
закругленные - отвечают за концы креста.

Чтобы разбить на две части, нужно из каждой из частей убрать лишние прямые. За прямую линию отвечают буквы L, l.

Новый сегмент можно рисовать следующим образом:

переходим в начальную точку с помощью M
рисуем дугу c ... s ...
рисуем прямую линию нужной длина L
рисуем вторую дугу
завершаем путь z

Для проб можно взять любой svg редактор. например такой https://yqnn.github.io/svg-path-editor/

В результате можно получить следующие пути:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path  d="M 297.4 406.6 c 12.5 12.5 32.8 12.5 45.3 0 s 12.5 -32.8 0 -45.3 L 86.6 105.4 c -12.5 -12.5 -32.8 -12.5 -45.3 0 s -12.5 32.8 0 45.3 z"/>
<path d="M 342.6 150.6 c 12.5 -12.5 12.5 -32.8 0 -45.3 s -32.8 -12.5 -45.3 0 L 41.4 361.4 c -12.5 12.5 -12.5 32.8 0 45.3 s 32.8 12.5 45.3 0 z" />
</svg>

Answer 2

Вариант с использованием INKSCAPE 0.92

Сейчас на сайте доступны для скачивания более современные версии редактора: v1.4, но проще для освоения более старые версии, где не всё так наворочено.
Но в случае использования более новых версий редактора, ориентируйтесь на основные команды и пункты меню, они одинаковы для всех версий.

Help - INKSCAPE

Открываем исходник в графическом редакторе.

Видим, что контуры фигуры заданы одним path.
Задача разделить его на два path

Удаление одной линии крестика

Удерживая Shift, отмечаете мышкой узловые точки наклонной линии
Выбираете - Удалить выделенные узлы

Редактирование узлов

Выбираете пункт меню: Редактировать узлы контура или нажимаете F2

Далее тащите рычаг управления узловой точки до совмещения с длинной стороной контура наклонной прямой

Повторяете действия для второй пары узловых точек.

Сохраняете код в формате *.svg
Для оптимизации файла svg. прогоняете его через оптимизатор SVGOMG

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>

Повторяем операции 1-5 для другой линии крестика

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>
</svg>

Помещаем оба path в один файл svg

<svg xmlns="http://www.w3.org/2000/svg" width="384" height="512" viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>

    <path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>

На первый взгляд это кажется сложно и трудоёмко но повторив эти действия пару раз, вы увидите, что это займет всего несколько минут.

Чтобы сделать иконку адаптивной,- нужно обернуть файл *.svg контейнером и заменим абсолютные единицы на относительные:

<style>
.container
{
width:30wv;
height:30wh;  
 
}
</style>

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="30vh"  viewBox="0 0 384 512">
<path d="M297.4 406.6a32.05 32.05 0 0 0 45.3 0 32.05 32.05 0 0 0 0-45.3L237.3 256C388.17 409.27 73.75 94.85 192 210.7L86.6 105.4a32.05 32.05 0 0 0-45.3 0 32.05 32.05 0 0 0 0 45.3L146.7 256C41.3 150.7 363.12 471.66 192 301.3Z"/>

    <path d="m237.3 256 105.3-105.4a32.05 32.05 0 0 0 0-45.3 32.05 32.05 0 0 0-45.3 0L192 210.7C312.04 91.04 4.92 398.16 146.7 256L41.4 361.4a32.05 32.05 0 0 0 0 45.3 32.05 32.05 0 0 0 45.3 0L192 301.3C30.49 460.8 386.7 104.58 237.3 256Z"/>
</svg>
</div>

Answer 3

Да просто самому с нуля написать пару линий - и готово.

Тут красный крестик - мой, а чёрный - из вопроса.

svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

svg + svg {
  animation: blink 3s linear infinite alternate;
}

@keyframes blink {
    0% { opacity: 1; }
   25% { opacity: 1; }
   90% { opacity: 0; }
  100% { opacity: 0; }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256l105.3-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3z"/></svg>

<svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2" stroke="red" stroke-linecap="round" />
  <line x1="-2" y1="2" x2="2" y2="-2" stroke="red" stroke-linecap="round" />
</svg>

Я бы ещё в css вынес параметры:

svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

line {
  stroke: black;
  stroke-linecap: round;
}

<svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2" />
  <line x1="-2" y1="2" x2="2" y2="-2" />
</svg>

А вот с анимацией до бургера:

svg {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100vmin;
}

line {
  stroke: black;
  stroke-linecap: round;
}

<svg viewBox="-4 -4 8 8">
  <line x1="-2" y1="-2" x2="2" y2="2">
    <animate attributeType="XML" attributeName="y2" from="2" to="-2" dur="3s" repeatCount="indefinite" />
  </line>
  <line x1="0" y1="0" x2="0" y2="0" >
    <animate attributeType="XML" attributeName="x1" from="0" to="-2" dur="3s" repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="x2" from="0" to="2" dur="3s" repeatCount="indefinite" />
  </line>
  <line x1="-2" y1="2" x2="2" y2="-2">
    <animate attributeType="XML" attributeName="y2" from="-2" to="2" dur="3s" repeatCount="indefinite" />
  </line>
</svg>

БЛОГ НА HUSL

Разделить один объект svg на 2

Ответы (3 шт):