Как добавить видимые псевдоэлементы в путь SVG - PullRequest
Новая
       125

Как добавить видимые псевдоэлементы в путь SVG

0 голосов
/ 28 мая 2020

Я пытаюсь использовать карту SVG со странами в качестве «пути». При наведении указателя страны я хочу показать псевдоэлемент (такую ​​же форму) с фоновым изображением. Я могу управлять заливкой и обводкой при наведении, я могу добавить: before (видно только в инспекторе), но не могу отображать перед элементом на странице. Вы знаете решение этой проблемы? 

.map_svg{
    display: block;
    margin: 0 auto;
}

path {
    position: relative;

}
#a:before {
    position: absolute;
    display: block;
    content: url("img/1.png");
    height: 100px;
    width: 100px;
}
#b:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    display: block;
    background-image: url('test.png');
    background-size: cover;
}
    <svg xmlns="http://www.w3.org/2000/svg" class="map_svg" width="700.903" height="592.777" viewBox="0 0 700.903 592.777">
        <g id="All_Contries" data-name="All Contries" transform="translate(5573.605 21997.488)">
          <path id="a" data-name="Saudi Arabia" d="M-5476.049-21940.789l-30.43-32.66,58-16.361,5.652-6.564,33.515,7.934,24.839,18.758,21.618,8.416,70.931,62.018,75.95,5.727,6.926,15.047,20.85.926,11.972,28.689,4.964,1.738,12.032,15.8,14.575,7.705,4.5,20.629-5.711-.6,8.343,20.371,4.863.789,5.011,20.5,11.3,11.609,13.7.719v7.723l27.125,34.777,74.126,9.424,12.87,19.889-20.144,60-82.237,28.258-40.2,7.365-42.023,3.67-23.153,12.422-19.65,31.361-7.122,4.787h-6.493l-6.506-10.2-6.46,2.971-32.337-2.971-3.48-3.971-42.437,2.063-6.343-5.389-7.265,3.326,1.578,3.971-3.63,12.105,3.63,3.9-9.345,10.926-6.3-.564-1.988-12.039-9.7-12.3.583-8.5-16.289-10.994-8.16-15.139,4.358-.7,1.076-5.645-9.417-1.465-10.96-29.955-23.339-17.629h-5.2l-22.128-27.861,4.576-5.82-6.983-14.449,4.381-11.215-11.991-35.014-5.24-3.881-1.221-7.328-19.32-13.852-8.045-1.037-1.043-6.25-4.868-6.174v-14.059l-5.268-7.33-.827-6.254-9.619-4.846v-9.846l-9.028-5.8-1.295-9.541-13.252-14.691-.574-6.621-16.354-24.746H-5572.3l10.623-39.58,31.891,5.316,12.577-11.871,5.052-10.986,21.919-1.629,3.341-13.1Z" fill="#fff" stroke="#707070" stroke-width="2"/>
          <path id="b" d="M-5060.75-21520.826l-30.149-68.705-40.2,7.365-42.023,3.67-23.153,12.422-19.65,31.361-7.122,4.787h-6.493l-6.506-10.2-6.46,2.971-32.337-2.971-3.48-3.971-42.437,2.063-6.343-5.389-7.265,3.326,1.578,3.971-3.63,12.105,3.63,3.9-9.345,10.926-4.03-.361,1.773,10.1-4.381,10,4.381,13.375,2.257,7.592,2.157,15.709,7.284,15.5-.822,17.711,7.429,10.732-.634,4.248,8.879,1.174,6,1.705h11.625l3.207-5.937,8.487,3.059,6.065-4.248,3.341-4.654,5.85-.771,2.034-5.307,7.715-3.494,28.522-1.033,22.526-10.574,7.368-7.139,19.4.824,7.279-4.3,6.529-9.789,16.161-8.693,14.827-.965,10.332-6.455h8.271l31.354-14.225,6.058-1.078-2.844-11.088,8.279-14.16Z" fill="#fff" stroke="#707070" stroke-width="2"/>
        </g>
      </svg>

1 Ответ

0 голосов
/ 28 мая 2020

В данный момент вы не можете использовать псевдоэлементы в svg. Однако вы можете получить нужный эффект, установив непрозрачность обрезанного изображения на 0 и изменив его при наведении, например: 

svg{border:solid}

image:hover{opacity:1}
<svg xmlns="http://www.w3.org/2000/svg" class="map_svg" viewBox="0 0 700.903 592.777">
        <g id="All_Contries" data-name="All Contries" transform="translate(5573.605 21997.488)">
          <clipPath id="cpa">
          <path id="a" data-name="Saudi Arabia" d="M-5476.049-21940.789l-30.43-32.66,58-16.361,5.652-6.564,33.515,7.934,24.839,18.758,21.618,8.416,70.931,62.018,75.95,5.727,6.926,15.047,20.85.926,11.972,28.689,4.964,1.738,12.032,15.8,14.575,7.705,4.5,20.629-5.711-.6,8.343,20.371,4.863.789,5.011,20.5,11.3,11.609,13.7.719v7.723l27.125,34.777,74.126,9.424,12.87,19.889-20.144,60-82.237,28.258-40.2,7.365-42.023,3.67-23.153,12.422-19.65,31.361-7.122,4.787h-6.493l-6.506-10.2-6.46,2.971-32.337-2.971-3.48-3.971-42.437,2.063-6.343-5.389-7.265,3.326,1.578,3.971-3.63,12.105,3.63,3.9-9.345,10.926-6.3-.564-1.988-12.039-9.7-12.3.583-8.5-16.289-10.994-8.16-15.139,4.358-.7,1.076-5.645-9.417-1.465-10.96-29.955-23.339-17.629h-5.2l-22.128-27.861,4.576-5.82-6.983-14.449,4.381-11.215-11.991-35.014-5.24-3.881-1.221-7.328-19.32-13.852-8.045-1.037-1.043-6.25-4.868-6.174v-14.059l-5.268-7.33-.827-6.254-9.619-4.846v-9.846l-9.028-5.8-1.295-9.541-13.252-14.691-.574-6.621-16.354-24.746H-5572.3l10.623-39.58,31.891,5.316,12.577-11.871,5.052-10.986,21.919-1.629,3.341-13.1Z" />
          </clipPath>
          <clipPath id="cpb">
          <path id="b" d="M-5060.75-21520.826l-30.149-68.705-40.2,7.365-42.023,3.67-23.153,12.422-19.65,31.361-7.122,4.787h-6.493l-6.506-10.2-6.46,2.971-32.337-2.971-3.48-3.971-42.437,2.063-6.343-5.389-7.265,3.326,1.578,3.971-3.63,12.105,3.63,3.9-9.345,10.926-4.03-.361,1.773,10.1-4.381,10,4.381,13.375,2.257,7.592,2.157,15.709,7.284,15.5-.822,17.711,7.429,10.732-.634,4.248,8.879,1.174,6,1.705h11.625l3.207-5.937,8.487,3.059,6.065-4.248,3.341-4.654,5.85-.771,2.034-5.307,7.715-3.494,28.522-1.033,22.526-10.574,7.368-7.139,19.4.824,7.279-4.3,6.529-9.789,16.161-8.693,14.827-.965,10.332-6.455h8.271l31.354-14.225,6.058-1.078-2.844-11.088,8.279-14.16Z" /></clipPath>
          
          
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="-5573.605" y="-21997.488" width="600" height="600" clip-path="url(#cpa)" opacity="0" />
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/enfeinada250.jpg" x="-5400" y="-21700" width="400" height="300" clip-path="url(#cpb)" opacity="0"  />
          
<use xlink:href="#a" fill="none" stroke="#707070" stroke-width="2" pointer-events="none" />
<use xlink:href="#b" fill="none" stroke="#707070" stroke-width="2" pointer-events="none"/>         
        </g>
      </svg>
...