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

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

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


svg html css anchor href
person singmotor    schedule 05.02.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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');
});

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

person Paul LeBeau    schedule 05.02.2015
comment
Я думаю, вам понадобится xlink:href для элемента ‹a›, чтобы он обрабатывался как якорь. - person Erik Dahlström; 05.02.2015
comment
Спасибо, Эрик. Забыл это изменить. - person Paul LeBeau; 05.02.2015
comment
ооочень близко! @PaulLeBeau спасибо за ответ. Теперь курсор меняется при наведении курсора мыши на треугольник, но по-прежнему не открывает привязку при нажатии. Есть предположения? Спасибо еще раз за помощь! - person singmotor; 05.02.2015
comment
Вы полагаетесь на то, что Bootstrap автоматически найдет модальную ссылку? Вы пытались явно добавить модальность с помощью $('#portfolioModal3').modal(options)? - person Paul LeBeau; 06.02.2015
comment
@PaulLeBeau Думаю, да? Я не уверен, что вы подразумеваете под явным добавлением, хотя это вполне может быть проблемой. Модель не существует на странице и является своего рода всплывающим окном. Куда бы я добавил этот код? это похоже на джс - person singmotor; 06.02.2015
comment
@PaulLeBeau просто для того, чтобы лучше прояснить проблему, когда я пытаюсь что-то сделать: если я удалю xlink: перед href в вашем коде, то область за пределами треугольника больше не будет выбираться, а внутренняя часть будет, но часть проблемы остается, потому что : курсор не превращается в руку, указывающую, что щелчок возможен, и половина треугольника недоступна для щелчка, потому что она примыкает к другому треугольнику, указывающему противоположно (вниз), и половина его покрыта квадратным div второго треугольника ( даже несмотря на то, что второй треугольник также имеет перемещенный href, как показывает ваш код). Имеет ли это смысл? - person singmotor; 06.02.2015
comment
Префикс xlink: требуется для ссылок <a> в SVG. Вы не можете удалить его. И да, фрагмент, который я разместил, написан на JS. Возможно, Bootstrap не может автоматически найти атрибут data-toggle, когда он находится в SVG. Этот javascript явно добавит его. Во всяком случае, по крайней мере, в HTML - я сам не пробовал в контексте SVG. - person Paul LeBeau; 06.02.2015
comment
@PaulLeBeau да, все еще безуспешно. Я в шоке, что так сложно создавать соединяемые треугольники :/ Тем не менее, я очень ценю всю вашу помощь. Что я сейчас делаю с вашим исправлением: оно делает так, чтобы курсор выбора исчезал за пределами треугольника, но также исчезал с правой стороны треугольника (наверняка, потому что он закрыт соседним div). И это не выбирается. - person singmotor; 07.02.2015
comment
Пол, я провел кучу исследований, и, по-видимому, у SVG нет z-индекса, а их основной z-индекс определяется их порядком. Как вы думаете, это означает, что у меня всегда будет один svg, перекрывающийся другим, поскольку у div есть отрицательные поля, сталкивающие их вместе? Мне нужно как-то придумать, как получить сверху только треугольники, а не весь прямоугольный SVG. - person singmotor; 08.02.2015
comment
Итак, кажется (как я и подозревал), что вам нужно открыть модальное окно самостоятельно. Я обновил свой ответ. Что касается ваших перекрывающихся <div>, это проблема. AFAIK нет простого кросс-браузерного способа сделать это. Вам нужно будет поместить все треугольники в один и тот же SVG. - person Paul LeBeau; 08.02.2015
comment
@PaulLeBeau Не знаю, как я пропустил твой ответ, извини! Я пришел к такому выводу обо всех треугольниках в одном и том же SVG и пришел к этому выводу (все они в одном и том же svg, просто перепутались фоны), любая помощь по завершению была бы здоровой: stackoverflow.com/questions/ 28443229/ - person singmotor; 11.02.2015

arrow_upward
0
arrow_downward

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

<a><img src="foo" /></a>
person Eric    schedule 05.02.2015
comment
Спасибо за ответ Эрик! Это дает мне щелчок-курсор только при наведении курсора мыши на треугольник (что я хочу). Но когда я на самом деле нажимаю, ничего не происходит. - person singmotor; 06.02.2015