Вставьте код SVG (не img) в блок HTML

На чтение 3 мин Опубликовано 27.09.2024

Вопрос или проблема

Я хочу вставить svg-код в HTML-блок Гутенберга. Я не хочу вставлять его как изображение, потому что хочу управлять им с помощью CSS. Если я вставляю svg, все теги исчезают, и у меня остается только текст, который был внутри тегов svg. Спасибо.

Я опробовал этот код на чистой установке WordPress

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

и использовал ‘Пользовательский HTML’ в Гутенберге в новом посте. Это сработало хорошо для меня.

Тот же код отображался в DOM без удаления каких-либо тегов или добавления новых

Возможно, вы не можете редактировать SVG с помощью HTML, потому что WordPress не генерирует код, пока страница не будет вызвана.

Что вы хотите сделать, так это использовать собственный SVG-компонент Гутенберга

import { G, Path, SVG, Rect, Polygon } from '@wordpress/components';
<svg strokeLinecap={ "round" }/>

Ответ или решение

Чтобы вставить SVG-код непосредственно в блок HTML Gutenberg на WordPress и иметь возможность стилизовать его с помощью CSS, вы можете следовать приведённым ниже рекомендациям.

Использование блока "Пользовательский HTML":
Чтобы вставить SVG-код в блоке Gutenberg, вы можете воспользоваться блоком "Пользовательский HTML". Однако, как вы заметили, иногда тег SVG может быть удалён системой. Чтобы это предотвратить, убедитесь, что вы правильно вставляете SVG-код в редактор. Вот пример кода, который вы можете вставить:
```
<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```
Проверка настроек WordPress:
Иногда SVG-код может быть удалён из-за настроек безопасности в WordPress. Для разрешения вставки SVG необходимо включить его поддержку. Это можно сделать, добавив следующий код в файл functions.php вашей темы:
```
function cc_mime_types($mimes) {
   $mimes['svg'] = 'image/svg+xml';
   return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
```
Использование компонентов SVG от Gutenberg:
Если вы разрабатываете свою собственную тему или плагин, вы можете использовать компоненты SVG, предоставляемые Gutenberg, для создания SVG-изображений. Это хороший способ интеграции SVG с использованием React. Пример кода:
```
import { SVG, Circle } from '@wordpress/components';

const MySVGIcon = () => (
 <SVG width="100" height="100">
   <Circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
 </SVG>
);
```
Добавление CSS-стилей:
После успешной вставки SVG-кода в HTML-блок вы можете стилизовать его с помощью CSS. Например:
```
svg {
   transition: transform 0.2s;
}

svg:hover {
   transform: scale(1.1);
}
```

Таким образом, используя указанные шаги, вы сможете вставить SVG-код в блок Gutenberg и успешно управлять его стилями через CSS. Если у вас возникнут дополнительные проблемы или вопросы, не стесняйтесь обращаться за помощью в сообщество WordPress или специализированные форумы.