Как стиль SVG через css?

У меня есть этот код:Как стиль SVG через css?

#circleSVG { 
 
fill : red; 
 
}

<svg> 
 
    <g transform='translate(100,100)'> 
 
    <circle id='#circleSVG' r='5'></circle> 
 
    </g> 
 
</svg>

JSFiddle: https://jsfiddle.net/thatOneGuy/x2pxx92e/

Можно ли стиль круг с помощью CSS? И не встраивать как так (я использую D3):

d3.select('#circleSVG').style('fill','red');

источник

2016-10-17 thatOneGuy

попробовать этот 'круг {SVG заполнения: красный;}' –

@MinalChauhan я должен быть в состоянии выбрать его через id/class. Это действительно работает – thatOneGuy

Возможно с id и классом .. проверьте это .. https://jsfiddle.net/x2pxx92e/4/ –

Вы сделали ошибку при добавлении id в свой круг. Он должен быть id='circleSVG', а не id='#circleSVG'.

С помощью CSS вы используете # для обозначения id и . для обозначения класса.

источник

2016-10-17 12:55:31 Ashitaka

Какой я идиот Я. Глупая ошибка. Спасибо, что указали – thatOneGuy

Все в порядке! Мы все ошибаемся. – Ashitaka

Не думайте, что вы можете взглянуть на это: https://jsfiddle.net/thatOneGuy/x2pxx92e/ 5/Я добавляю класс на mouseover, который должен окрасить круг оранжевым, но это не так. Это моя фактическая проблема, которую я испытываю в своем автономном коде – thatOneGuy

удалить # из ID

/** 
 
* essentially the same CSS just more precise. 
 
**/ 
 
svg.foo-class>g>circle { 
 
fill : red; 
 
}

<svg class="foo-class"> 
 
    <g transform='translate(100,100)'> 
 
     <circle id='circleSVG' r='5'></circle> 
 
    </g> 
 
</svg>

источник

2016-10-17 13:01:40 bonomme

Как стиль SVG через css?

ответ

Смежные вопросы