Делаем 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.