Я пытаюсь сделать что-то, казалось бы, относительно простое, но после долгих поисковых запросов и поиска я не могу заставить это работать. У меня есть многоугольник 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, идеально.
Любая помощь высоко ценится!