Делаем SVG изображение кликабельным.

Делаем SVG изображение кликабельным.

[spb_row element_name=»Ряд» wrap_type=»content-width» parallax_image_height=»content-height» parallax_image_movement=»fixed» parallax_image_speed=»0.5″ bg_video_loop=»yes» parallax_video_height=»window-height» parallax_video_overlay=»none» row_overlay_opacity=»0″ row_col_pos=»default» width=»1/1″ el_position=»first last»] [spb_text_block animation=»none» animation_delay=»0″ simplified_controls=»yes» custom_css_percentage=»no» padding_vertical=»0″ padding_horizontal=»0″ margin_vertical=»0″ custom_css=»margin-top: 0px;margin-bottom: 0px;» border_size=»0″ border_styling_global=»default» width=»1/1″ el_position=»first last»]

Есть разные способы сделать SVG изображение кликабельным са сайте.  Далее представлен один из них. Так как обычный способ указания ссылки для изображения не срабатывает, то можно добавить псевдоэлемент для ссылки.

[/spb_text_block] [spb_codesnippet title=»HTML» language=»markup» width=»1/1″ el_position=»first last»]

<a href=»#» class=»svg»>
<object data=»img/imagename.svg» type=»image/svg+xml» class=»someone»>
</object>
</a>

[/spb_codesnippet] [spb_codesnippet title=»CSS» language=»css» width=»1/1″ el_position=»first last»]

a.svg:after {
content: «»;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

[/spb_codesnippet] [/spb_row]

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.