Svg не отображает path при добавлении css all: revert

Question

Я использую стороннюю библиотеку rd party UI library, которая включает такое правило:

* {all: revert;}

Затем я добавляю svg, но он не отображается, поскольку ширина и высота <path> равны 0.
У меня нет возможности удалить all: revert; в коде (только переопределение).

Какой стиль нужно добавить к <path>, чтобы сделать его видимым?

Вот демо https://codesandbox.io/s/suspicious-cori-4pgfh

body {
  font-family: sans-serif;
}

/* this cannot be removed  */
body * {
  all: revert; /* this added by 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="svg-wrapper">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10,30
                         A 20,20 0,0,1 50,30
                         A 20,20 0,0,1 90,30
                         Q 90,60 50,90
                         Q 10,60 10,30 z"
        />
      </svg>
    </div>

  </body>
</html>

_{Свободный перевод вопроса Svg not render when added css all:revert от участника @Pavlo Oliinyk.}

Answer 1

all: revert; сбрасывает данные d (которые теперь также являются свойством CSS), а поскольку свойства CSS всегда переопределяют атрибуты SVG, ваш <path> больше не содержит фигуры.

Единственное исправление, которое я смог найти, - это запустить скрипт, который копирует атрибут d SVG в свойство d CSS для всех элементов <path>:

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

document.querySelectorAll('path').forEach(path => {
  const data = path.getAttribute('d').replace(/\s+/g, ' '),
        cssData = `path("${data}")`;
  path.style.d = cssData;
});

body {
  font-family: sans-serif;
}

/* Это можно удалить  */
body * {
  all: revert; /* Здесь добавляется 3-rd party library */
}

.svg-wrapper * {
  display: block;
  width: 100px;
  height: 100px;
}

.svg-wrapper path {
  display: block;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="svg-wrapper">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M 10,30
                         A 20,20 0,0,1 50,30
                         A 20,20 0,0,1 90,30
                         Q 90,60 50,90
                         Q 10,60 10,30 z"
        />
      </svg>
    </div>

  </body>
</html>

_{Свободный перевод ответа от участника @Sphinxxx.}

БЛОГ НА HUSL

Svg не отображает path при добавлении css all: revert

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