Наведение курсора на прозрачные SVG

Как я могу навечно работать с прозрачными полигонами SVG?Наведение курсора на прозрачные SVG

В приведенном ниже коде, вы увидите, что второй треугольник не легко признать :hover (и она не полностью, когда stroke атрибут удаляется или none «d). В третьем треугольнике наведение начинает работать с прозрачностью, но только рядом с текстом.

<html><head><style> 
body { background-color: Green } 
polygon:hover { 
    fill:Red; 
} 
g:hover polygon { 
    fill:Red; 
} 
</style></head><body> 
    <svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" /> 
     <polygon fill="none" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" /> 
     <g> 
      <polygon fill="none" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" /> 
      <text x="50" y="150" font-family="Verdana" font-size="30">hi</text> 
     </g> 
    </svg> 
</body></html>

Я подтвердил это по Chrome, Firefox и Safari. Любые идеи (которые будут работать в большинстве браузеров)?

источник

2016-12-10 enfascination

Для каждого элемента укажите цвет заливки как fill="red" и установите 0 в качестве непрозрачности заполнения fill-opacity="0". На парения изменить заполняющей непрозрачность до 1:

body { 
 
    background-color: Green 
 
} 
 
polygon:hover { 
 
    fill-opacity: 1; 
 
} 
 
g:hover polygon { 
 
    fill-opacity: 1; 
 
}

<svg width="300px" height="600px" viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <polygon fill="white" stroke="black" stroke-width="0.5px" points="0,0 100,0 100,100 0,0" /> 
 
    <polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,0 0,100 100,100 0,0" /> 
 
    <g> 
 
    <polygon fill="red" fill-opacity="0" stroke="black" stroke-width="0.5px" points="0,100 100,100 100,200 0,100" /> 
 
    <text x="50" y="150" font-family="Verdana" font-size="30">hi</text> 
 
    </g> 
 
</svg>

источник

2016-12-10 20:25:02

Brilliant. Простое исправление показывает мне, что я просто задал вопрос RTFM. Какой ваш любимый ресурс для исследования элементов SVG W3 и поиска атрибутов, которые делают то, что вы видите? – enfascination

Я не уверен, что это действительно RTFM. У меня была та же проблема, и мне потребовалось некоторое время, чтобы найти простое решение, но, возможно, я еще не прочитал это руководство :) [MDN] (https://developer.mozilla.org/en/docs/Web/ SVG) является ресурсом всех целевых веб-технологий. [Sara Soueidan [(https://sarasoueidan.com/articles/) также имеет несколько хороших статей. –

Это то, для чего предназначены указатели-события. Для этого не используйте заливку. Непрозрачность стоит ресурсов и замедляет вашу страницу и истощает батарею ваших потребителей. Плюс, иногда у вас нет полного контроля над разметкой. Использование указателей-событий - это чистый CSS и рекомендуемый способ сделать это. –

Другой подход заключается в использовании pointer-events="all".

С указателями-событиями вы можете контролировать, какая часть вашей фигуры реагирует на события-указатели, независимо от их заполнения или инсульта.

circle:nth-of-type(1) { 
 
    pointer-events: fill 
 
} 
 
circle:nth-of-type(2) { 
 
    pointer-events: all 
 
} 
 
circle:nth-of-type(3) { 
 
    pointer-events: stroke 
 
} 
 
circle:nth-of-type(4) { 
 
    pointer-events: none 
 
} 
 
circle:hover { 
 
    fill: red; 
 
    stroke: blue 
 
}

<svg width="300px" height="300px" viewBox="0 0 100 100"> 
 
    <circle cx="25" cy="25" r="20" fill="none" stroke="red" stroke-width="5" /> 
 
    <circle cx="75" cy="25" r="20" fill="none" stroke="none" stroke-width="5" /> 
 
    <circle cx="25" cy="75" r="20" fill="green" stroke="none" stroke-width="5" /> 
 
    <circle cx="75" cy="75" r="20" fill="green" stroke="red" stroke-width="5" /> 
 
</svg>

источник

2016-12-11 03:29:18

Наведение курсора на прозрачные SVG

ответ

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