Я использую группу SVG на веб-странице, внутри SVG есть область, которая определяет «горячую точку» на графике (определяется как «путь» в коде ниже). Когда в пути происходит наведение мыши, я бы хотел, чтобы точка доступа была выделена, а также появился текст, описывающий элемент, выделенный путем. В этом случае путь представляет собой прямоугольник, обозначающий детектор угарного газа. После щелчка внутри горячей точки я хочу перенаправить пользователя на ссылку (в данном примере «google.com»). Приведенный ниже код работает, однако текст отображается только как контур шрифта (без заливки). Я бы предпочел сплошную заливку, и попытался поиграть с атрибутом fill opacity безуспешно. Любые предложения будут оценены.
<g id="CO_Detector">
'''<a
xlink:href= "http://www.google.com/">
<path d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
fill-opacity="0" stroke-width="4"
onmouseover="CO_Detector.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</a>'''
Удален атрибут fill-opacity и добавлен полный код страницы (ниже), как предложено Крисом. Без 'backgroundImage.png', когда файл запускается в браузере, видны только две прямоугольные черные области. При наведении курсора на эти области они выделяются красным цветом, и соответствующий текст появляется внизу изображения. Если тот же тип эффекта может быть достигнут с помощью CSS, мне было бы интересно увидеть пример.
Вот полный код:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 800, 600">
<defs>
<clipPath id="Clip_1">
<path d="M0,0 L800,0 L800,600 L0,600 z"/>
</clipPath>
</defs>
<g id="Image">
<image xlink:href="backgroundImage.png" opacity="1" width="800" height="600" x="0" y="0" />
</g>
<g id="CO_Detector">
'''<a
xlink:href= "http://www.google.com/">
<path d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
stroke-width="4"
onmouseover="CO_Detector.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</a>'''
</g>
<g id="Inverter">
'''<a
xlink:href= "http://www.bing.com/">
<path d="M268.729,154.323 L493.119,154.323 L493.119,198.647 L268.729,198.647 L268.729,154.323 z"
stroke-width="4"
onmouseover="Inverter.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="Inverter.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">Inverter</tspan>
</text>
</a>'''
</g>
</svg>
Основываясь на ответе, предложенном @ChrisW ниже, я обновил код. Эта последняя версия «почти» делает все, что мне нужно. Используя CSS-код Криса в качестве отправной точки, я немного изменил его стиль, чтобы удалить шаблон заливки и изменить обводку на «красный». Кроме того, я переместил теги привязки, чтобы они НЕ включали текстовые области группы. При предыдущем позиционировании привязки связанная гиперссылка была активной при наведении курсора на область текстового промежутка. Я не узнал эту проблему изначально. Приведенный ниже код выполняет практически все, что я ищу, за одним исключением: текст, который появляется при наведении, не заполнен.
.hoverableBox:hover {
stroke: red;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 800, 600">
<defs>
<clipPath id="Clip_1">
<path d="M0,0 L800,0 L800,600 L0,600 z"/>
</clipPath>
</defs>
<g id="Image">
<image xlink:href="../pics/181030_equipmentBox.png" opacity="1" width="800" height="600" x="0" y="0" />
</g>
<g id="CO_Detector">
'''<a
xlink:href= "CO_Detector.html">
<path class="hoverableBox" d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
stroke-width="4" fill-opacity="0.1"
onmouseover="CO_Detector.setAttribute('stroke', 'red')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
</a>'''
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="Arial" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</g>
<g id="Inverter">
'''<a
xlink:href= "inverter.html">
<path d="M268.729,154.323 L493.119,154.323 L493.119,198.647 L268.729,198.647 L268.729,154.323 z"
stroke-width="4" fill-opacity="0.1"
onmouseover="Inverter.setAttribute('stroke', 'red')"
onmouseout ="Inverter.removeAttribute('stroke')" />
</a>'''
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="Arial" fill-opacity="0" stroke-width="2" font-size="72">Inverter</tspan>
</text>
</g>
</svg>
На самом деле, при дальнейшем рассмотрении таблица стилей совершенно не нужна. Поскольку операторы onmouseover и onmouseout по-прежнему используются для воздействия на текстовый объект в каждой группе, эти операторы также надлежащим образом управляют штрихом поля горячей точки. Итак, исходный вопрос сохраняется: есть ли простой способ изменить шаблон заливки текста при наведении на соответствующую точку доступа?