Как превратить все пространство рядом с группой путей SVG в интерактивную ссылку, а не только сам штрих SVG? - PullRequest
Новая
       89

Как превратить все пространство рядом с группой путей SVG в интерактивную ссылку, а не только сам штрих SVG?

0 голосов
/ 13 июля 2020

У меня есть несколько элементов svg <path>, сгруппированных вместе в две отдельные группы <g> элементов (идентификаторы po и ph). Оба находятся внутри другой группы, и все находится внутри одного <svg>.

HTML выглядит так: 

<!DOCTYPE html>
<html lang="en">
   <head>
      <link href="stripped_back_CSS.css" rel="stylesheet">
   </head>
   <body>
      <div id="container">
         <div id="content" class="hide">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
               <style type="text/css">
                  .st5{fill:none;stroke:red;stroke-miterlimit:10;}
               </style>
               <g id="page">
                  <g id="po">
                     <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
                     <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
                  </g>
                  <g id="ph">
                     <path class="st5" d="M392.4,522c0,3.2,0.4,6.6,1.1,9.7c-3.7-3.9-2.3-16.4,4.9-11.3c4.1,2.8-3.3,7.3-6.6,5.5"/>
                     <path class="st5" d="M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3"/>
                     <path class="st5" d="M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1"/>
                     <path class="st5" d="M403.9,525.3c1.8-0.8,4-1.9,6-2.2"/>
                  </g>
               </g>
            </svg>
         </div>
      </div>
   </body>
</html>

и файл CSS вот так: 

#content {
    text-align: center
}

#content svg {
    background: #fff;
    width: auto;
    height: 152vh;
    margin: 8vh 0 8vh 0;
    box-shadow: -9px -9px 20px 0 rgba(0, 0, 0, .12);
    max-width: 90%
}

Это дает следующие символы SVG:

введите описание изображения здесь

Я хотел бы сделать каждую из этих групп текста интерактивной ссылкой. Однако, если я попытаюсь окружить групповые теги просто тегами <a></a>, то обводка текста действительно будет кликабельной, НО пробел между обводкой - нет. Например, если курсор был наведен на внутри буквы «O», то в этой позиции ничего нельзя щелкнуть. Как сделать "общую область" каждой группы символов кликабельной?

Спасибо!

Ответы [ 2 ]

2 голосов
/ 14 июля 2020

Один из самых простых способов сделать это - использовать <rect /> внутри вашего <g>. Вы можете присвоить opacity 0, а затем написать все свои <path>. Вы можете указать <rect /> высоту и ширину, равные области, на которую вы хотите щелкнуть / любому событию мыши. 

           <g id="po">
               <rect x="" y="" width="" height="" style="fill-opacity:0; stroke-opacity:0" />
               <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
               <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
           </g>
1 голос
/ 14 июля 2020

Просто добавьте прозрачный прямоугольник сверху или снизу других элементов, которые вы хотите рассматривать как одну ссылку. Вероятно, вы обнаружите, что сверху (ie. Позже в файле SVG) возникает меньше проблем. См. Ниже. 

<g id="po">
  <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
  <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
  <a xlink:href="http://www.stackoverflow.com" target="_blank">
    <rect x="382" y="461" width="18" height="14" fill="transparent"/>
  </a>
</g>

Элемент <a> может быть либо вокруг <rect>, вокруг <g>, либо вокруг всех дочерних элементов группы. Это не имеет особого значения. 

#content {
    text-align: center
}

#content svg {
    background: #fff;
    width: auto;
    height: 152vh;
    margin: 8vh 0 8vh 0;
    box-shadow: -9px -9px 20px 0 rgba(0, 0, 0, .12);
    max-width: 90%
}
<div id="container">
         <div id="content" class="hide">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
               <style type="text/css">
                  .st5{fill:none;stroke:red;stroke-miterlimit:10;}
               </style>
               <g id="page">
                  <g id="po">
                     <path class="st5" d="M382.1,465.4c1.1,2.6,1.3,7.3,1.4,9.2c0.1-3.3-4-13,2.7-13.1c5.3-0.1,4.4,8.5-2.7,6.7"/>
                     <path class="st5" d="M395.3,464.1c-4.9,0.9-2.3,8,2.3,5.7c4.7-2.3-0.3-7.5-3.8-3.8"/>
                     <a xlink:href="http://www.stackoverflow.com"">
                       <rect x="382" y="461" width="18" height="14" fill="transparent"/>
                     </a>
                  </g>
                  <g id="ph">
                     <path class="st5" d="M392.4,522c0,3.2,0.4,6.6,1.1,9.7c-3.7-3.9-2.3-16.4,4.9-11.3c4.1,2.8-3.3,7.3-6.6,5.5"/>
                     <path class="st5" d="M402.8,519.3c1,3.1,0.3,6.4,2.2,9.3"/>
                     <path class="st5" d="M410.5,517.6c-1.2,3.6-0.9,8.7,1.1,12.1"/>
                     <path class="st5" d="M403.9,525.3c1.8-0.8,4-1.9,6-2.2"/>
                     <a xlink:href="http://www.stackoverflow.com">
                       <rect x="391" y="517" width="21" height="15" fill="transparent"/>
                     </a>
                  </g>
               </g>
            </svg>
         </div>
      </div>
...