Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

Связывание многоугольника SVG с привязкой

Автор вопроса: singmotorОтветов: 2

Я пытаюсь сделать что-то, казалось бы, относительно простое, но после долгих поисковых запросов и поиска я не могу заставить это работать. У меня есть многоугольник svg, который я использую для обрезки изображения в треугольник. В настоящее время он находится внутри столбца начальной загрузки (с тегом в нем), который ссылается на точку привязки. Проблема в том, что div(square) все ссылается на привязку.

Однако у меня есть несколько смежных треугольников, поэтому мне нужно, чтобы область, которая ссылается на якорь, была ограничена только тем, что находится внутри пути отсечения полигона.

Я пытался:

  • Перемещение тега a внутри тега clippath
  • перемещение тега a внутри полигона (как href)
  • создание href в этом формате для svg xlink:href="#portfolioModal3"

Я подозреваю, что это некоторая перестановка третьего варианта, которая достигает моей цели.

<div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                        <div class='tri-up'>
                            <svg width="100%" height="100%" viewBox="0 0 100 87">
                              <clipPath id="clipTriangleUp">
                                <polygon points="0 87,100 87,50 0"/>
                              </clipPath>
                              <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/1749x1510"/>
                            </svg>
                        </div>
                    </a>
                </div>

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

Любая помощь высоко ценится!

svghtmlcssanchorhref

Ответы

Ответ 1 · рейтинг 4 · Paul LeBeau

SVG может иметь <a> элементов. Попробуйте поместить ссылку внутри вашего SVG.

<div class="col-sm-4 portfolio-item dontwantpadding">
   <div class='tri-up'>
      <svg width="100%" height="100%" viewBox="0 0 100 87">
         <clipPath id="clipTriangleUp">
            <polygon points="0 87,100 87,50 0"/>
         </clipPath>
         <a id="svgtriangle"
            xlink:href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
            <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none"
                   width="100%" height="100%"
                   xlink:href="http://placehold.it/1749x1510"/>
         </a>
      </svg>
   </div>
</div>

Надеюсь, у вас не возникнет проблем с тем, что Bootstrap найдет файл data-toggle.

Обновить

Итак, кажется, что Bootstrap не найдет вашу модальную ссылку "открыть" автоматически, поэтому вам нужно добавить обработчик кликов в треугольник и открыть модальное окно самостоятельно.

var  triangle = document.getElementById("svgtriangle");

triangle.addEventListener('click', function(evt) {
    $('#myModal').modal('show');
});

Демонстрационная скрипта здесь

Ответ 2 · Eric

Попробуйте переместить тег внутри и непосредственно вокруг изображения.

<a><img src="foo" /></a>

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы