У меня есть проект d3, в котором SVG-значки (экспортированные из Adobe Illustrator, если это имеет значение) встроены в контейнер d3. (Структура проекта видна на снимке экрана devtools ниже)
Возникла проблема, когда CSS последнего SVG для загрузки переопределяет CSS, использовавшийся предыдущими SVG. Таким образом, на первом изображении ниже стили «A» и «B» переопределяются стилями в «C»
Классы определены в Illustrator, и я не имею никакого контроля поверх них (не считая их ручного редактирования в текстовом редакторе) и усугубляя проблему, это в настольном приложении Electron, которое позволяет пользователю добавлять свои собственные значки - так что пользователь ожидает go при переименовании CSS классы не реалистичны c.
Итак, мои вопросы:
- Правильный ли мой диагноз того, что происходит? (стили CSS являются "каскадными")
- Есть ли способ исправить это с помощью кода, чтобы изолировать каждый SVG?
РЕДАКТИРОВАТЬ: Спасибо за все комментарии. У меня есть только базовый c опыт использования SVG и CSS, но мне очень удобно с Javascript - поэтому мне было интересно, есть ли какой-нибудь способ "пространства имен" SVG, когда я добавляю его в свой d3 контейнер, чтобы изолировать его.
Полагаю, я мог бы проанализировать каждый SVG, используя JS и вставить уникальные имена классов и т. Д. c. но в моем d3 контейнере может быть 100 или более таких значков (это временная шкала), поэтому такой подход кажется медленным.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#DD1431;stroke:#231F20;stroke-miterlimit:10;}
.st1{fill:#FBB040;}
]]>
</style>
<circle class="st0" cx="295.989" cy="358.517" r="251.648"/>
<g>
<path class="st1" d="M400.258,498.945c-16,8-48,16-89,16c-95,0-166.5-60-166.5-170.5c0-105.5,71.5-177,176-177c42,0,68.5,9,80,15
l-10.5,35.5c-16.5-8-40-14-68-14c-79,0-131.5,50.5-131.5,139c0,82.5,47.5,135.5,129.5,135.5c26.5,0,53.5-5.5,71-14L400.258,498.945
z"/>
</g>
</svg>
