3

Здравствуйте, начал изучать SVG!

Такой вопрос, вот, например, прямоугольник (rectangle) или круг (circle) средствами svg закрасить легко, просто свойство одно!

А если у меня фигура неправильная, ну, например, котенок нарисован с помощью path, возможно ли как-то выбрать область, которая ограничивается этим path, и закрасить ее?

Для того чтобы поменять цвет этого котенка при наведении мышы, например?

Заранее благодарен за ответ!

1
  • 1
    @pankovalxndr, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 30 дек 2014 в 10:39

4 ответа 4

3

Можно, используя атрибут fill-rule. Посмотрите материал, например, у yoksel. Там найдете раздел про fill-rule с примерами.

1

Можно в стилях прописать:

path {
   fill: #000
}

Или поставить атрибутом:

<svg><path fill="#000"></path></svg>
0

Заливка фона любых объектов svg делается свойством fill:

<svg width="100%" height="100%" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">

  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="orange" stroke="black" stroke-width="3" />
</svg>

0

Наверняка ваш котенок - это не один path, так что если вы хотите заливать всего котенка при наведении мыши - добавьте к каждому path класс, а затем с помощью псевдокласса :hover задаете правило fill
Например:

.cat:hover {
fill: #fff;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.