Блог

Главная - Вопросы по программированию - Стиль CSS тег в SVG

Стиль CSS тег в SVG

#css #svg

Вопрос:

Я пытаюсь понять, как оформить тег привязки в SVG. Я думаю, что перепробовал все варианты, но ни один из них, похоже, не работает так, как задумывалось.

Заливка работает с .logoContact a{}, поэтому я знаю, что ссылаюсь на элемент, но свойство курсора не работает, и ни одно из состояний a:при наведении не работает.

Я пробовал поместить <a> это внутрь <g class="logoEmail"> , но это не работает. Мы будем очень признательны за любую помощь. — CES

 .logoContact a {
  fill: blue;
  cursor: pointer;
  transition: color 1s;
}

.logoContact a:hover {
  fill: red;
  cursor: pointer;
  transition: color 1s;
} 
 <g class="logoContact">
  <a href="xxxx">
    <g class="logoEmail">
      <path d="xxxxxx" />
      <path d="xxxxxx" />
      <path d="xxxxxx" />
    </g>
  </a>
</g>

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

1. Это прекрасно работает. codepen.io/Paulie-D/pen/dyRoRwK — Вам нужно будет продемонстрировать, что это не работает . Я подозреваю, что это ошибка пути или HTML.

2. Обратите внимание, что SVG использует заливку и обводку, а не свойство цвета HTML.

3. Если вы хотите, чтобы svg был кликабельной ссылкой, то поместите ссылку снаружи, а не внутри; попробуйте это?

Ответ №1:

Элементы SVG не имеют свойства CSS цвета. Вместо этого используйте заливку или обводку. Здесь у меня есть пример с a <rect> , который меняет цвет.

Селектор is ( .logoContact a ) будет управлять заполнением/штрихом для всех дочерних элементов, у которых нет более конкретного селектора. Итак, в данном случае это влияет на ребенка <rect> .

 .logoContact a {
  transition: 1s fill ease-in-out;
  fill: blue;
  cursor: pointer;
}

.logoContact a:hover {
  transition: 1s fill ease-in-out;
  fill: red;
} 
 <svg width="100" height="100">
  <g class="logoContact">
    <a href="#">
      <g class="logoEmail">
        <rect x="0" y="0" width="100" height="100"/>
      </g>
    </a>
  </g>
</svg>
Метки: