CSS функция обнаружения в SVG

Question

Я создаю SVG-инфографику, используя :hover, :active и :focus, чтобы добавить слой интерактивности для его улучшения. Графика c отлично работает, когда отображается статически, как , но когда она помещается в строку или как , она улучшается (, например, SVG ).

Если возможно , я бы хотел, чтобы график c отображал «интерактивную» метку - которая не появляется, когда SVG отображается в теге . Нет сценариев. Независимо от окружающей среды. По сути, я пытаюсь сделать 'CSS обнаружение функции'.

Мой подход состоял в том, чтобы установить базовое правило CSS:

.red {
    fill: red;
   }

Добавить правило для :hover состояние для всей поверхности SVG.

svg:hover .red {
    fill: cyan
   }

Inline и SVG соблюдают это правило. Основанные на IMG SVG игнорируют это. Как они должны. Отлично.

Хитрость (я думал ...) состояла в том, чтобы установить состояние :not(:hover). Когда SVG НЕ завис, сделайте это. Как бы тег IMG узнал, что происходит: not (: hover), верно?

svg:not(:hover) .red {
    fill: blue;
   }

Конечно, встроенные и SVG соблюдают это правило и поворачивают fill:blue.

К сожалению (и бесполезно), как и версия тега . : - /

Я не понимаю, как средство рендеринга отключает :hover{...} в , но анализирует его достаточно хорошо, чтобы не сломать svg:not(:hover){...}.

Разве то, что я пытаюсь сделать, невозможно?

Это демоверсии CodePen для пояснения:

https://codepen.io/alexmwalker/pen/BaoBdqL

Answer 1

Самое простое будет использовать javascript для установки определенного класса в элементе root. Скрипты не выполняются из <img>, точно так же, как они не передают пользовательские данные в загруженный документ SVG:

const content = `
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
    <style>
      :root.has-user-input rect {
        fill: green;
      }
    </style>
    <rect fill="red" x="0" y="0" width="50" height="50"/>
    <script>
      document.documentElement.classList.add('has-user-input');
    <\/script>
  </svg>`;
const blob = new Blob([content], { type: "image/svg+xml" });
const url = URL.createObjectURL( blob );

img.src = object.data = url;

<img id="img">
<object id="object"></object>