Блог

Главная - Вопросы по программированию - Как стилизовать SVG с помощью css?

Как стилизовать SVG с помощью css?

#css #d3.js #svg

#css — код #d3.js #svg

Вопрос:

У меня есть этот код :

 #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');

Комментарии:

1. попробуй это svg circle { fill : red;}

2. @MinalChauhan мне нужно иметь возможность выбрать его через id / class. Однако это действительно работает

3. Это возможно с идентификатором и классом .. проверьте это .. jsfiddle.net/x2pxx92e/4

4. отлично, @Ashitaka указал, что я неправильно установил свой идентификатор: ( Спасибо за помощь

Ответ №1:

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

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

Комментарии:

1. какой я идиот. Глупая ошибка. Спасибо, что указали на это

2. Все в порядке! Мы все совершаем эти ошибки.

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

4. Правило CSS, использующее an id , всегда выигрывает у правила CSS, использующего a class . Вот почему вы не должны использовать id s в CSS. Вот ваш исправленный JSFiddle: jsfiddle.net/x2pxx92e/8 . А вот еще более простая версия, использующая селектор CSS :hover : jsfiddle.net/x2pxx92e/10 .

Ответ №2:

удалите # из идентификатора

 /**
* 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>
Метки: