2

Есть группа svg-элементов g с идентификатором g1 , в ней лежат элементы path . Для g1 задан стиль:

#g1:hover {
display: none;
}

При наведении возникает проблема: display:none срабатывает не на всем поле, покрываемом g1 и его дочерними элементами (в результате при перемещении курсора по данному полю экран в данной области как бы мерцает, переключаясь между состояниями отображения/сокрытия элемента). @keyframes не работают вообще. svg-файл импортирован в html через тег svg, создан в Inkscape, сохранен как оптимизированный svg-файл. С чем это может быть связано и на какой стадии допущена ошибка? Весь код здесь: https://codepen.io/j_a_c_k_hammer/pen/oNWRpyp

2
  • наверное не трудно скопировать код,в вопрос, который у вас есть. Вопрос тогда будет более конкретный и на него вы сможете получить конкретный ответ-решение. В таком виде, как есть, вы вряд ли получите верный ответ 17 авг 2021 в 7:08
  • 1
    Обновил вопрос. 17 авг 2021 в 7:50

1 ответ 1

2

Описание в вопросе и предоставленный код в Codepen несколько отличаются.

Я не нашёл @keyframes и #g1

Может быть это поможет?
По крайней мере при наведении и движении курсора, мерцания нет

Вместо

 #g994:hover{
    visibility: hidden;
}

используйте при наведении opacity: 0;

  <style>
  #g994:hover{
    opacity: 0;
}
</style>
  <div id="coupe_container"><svg
            width="90.971069mm"
            height="111.14265mm"
            version="1.1"
            viewBox="0 0 90.971069 111.14265"
            id="svg97"
            sodipodi:docname="рисунок.svg"
            inkscape:version="1.1 (c68e22c387, 2021-05-23)"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:svg="http://www.w3.org/2000/svg">
           <defs
              id="defs22">
             <linearGradient
                id="linearGradient153800">
               <stop
                  stop-color="#ececec"
                  offset="0"
                  id="stop2" />
               <stop
                  stop-color="#e6e6e6"
                  offset="1"
                  id="stop4" />
             </linearGradient>
             <linearGradient
                id="linearGradient138356">
               <stop
                  stop-color="#b3b3b3"
                  offset="0"
                  id="stop7" />
               <stop
                  stop-color="#ececec"
                  offset="1"
                  id="stop9" />
             </linearGradient>
             <radialGradient
                id="radialGradient146724"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.03188334,0.04413427,-0.01925113,0.06580623,67.913745,-61.679643)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient149510"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.03188334,0.04413427,-0.01925113,0.06580623,89.505861,-61.679643)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient149520"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.03188334,0.04413427,-0.01925113,0.06580623,100.30192,-61.679643)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient149610"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.04906068,0.09322069,-0.02962292,0.13899119,-42.708958,-81.26846)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient149738"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.03188334,0.04413427,-0.01925113,0.06580623,78.709803,-61.679643)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient151589"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.04906068,0.09322069,-0.02962292,0.13899119,-50.926747,-81.26846)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient151593"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.04071188,0.08996715,-0.02458147,0.13414079,-30.682118,-90.817402)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient151654"
                cx="116.64"
                cy="159.61"
                r="29.903"
                gradientTransform="matrix(0.04071188,0.08996715,-0.02458147,0.13414079,-63.037735,-90.817402)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient138356" />
             <radialGradient
                id="radialGradient153802"
                cx="55.210999"
                cy="149.08"
                r="15.179"
                gradientTransform="matrix(1.3499437,-0.00835521,0.032795,3.2952826,-60.939048,-433.27919)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient153800" />
             <radialGradient
                id="radialGradient155758"
                cx="55.210999"
                cy="149.08"
                r="15.179"
                gradientTransform="matrix(1.3499437,-0.00835521,0.032795,3.2952826,-6.4285255,-433.27919)"
                gradientUnits="userSpaceOnUse"
                xlink:href="#linearGradient153800" />
           </defs>
           <rect
              x="0.43660432"
              y="0.38684416"
              width="90.10276"
              height="110.51003"
              fill="#ffffff"
              stroke="#000006"
              stroke-linejoin="round"
              stroke-opacity="0.78544"
              stroke-width="0.680567"
              id="rect24" />
           <g
              fill="none"
              stroke="#000000"
              id="g32"
              transform="matrix(0.53258521,0,0,0.46019001,-11.02889,-13.461654)">
             <path
                d="m 21.528,257.01 h 168.72"
                stroke-width="1.2373"
                id="path26" />
             <path
                d="m 21.061,42.889 h 170.59"
                stroke-width="1.2441"
                id="path28" />
             <path
                d="m 31.81,42.463 v 214.55"
                stroke-width="1.2652"
                id="path30" />
           </g>
           <path
              d="M 85.315774,6.2754353 V 105.20708"
              fill="#c86649"
              stroke-width="0"
              id="path34" />
           <rect
              x="33.201244"
              y="7.1852317"
              width="11.382943"
              height="52.162537"
              fill="#ffa1a1"
              stroke="#880a06"
              stroke-width="0.42698"
              id="rect40"
              style="stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              x="46.644764"
              y="7.1870713"
              width="11.626867"
              height="52.157932"
              fill="#ffa1a1"
              stroke="#880a06"
              stroke-width="0.431514"
              id="rect42"
              style="stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              x="32.735767"
              y="61.388248"
              width="25.755289"
              height="9.318388"
              id="rect45"
              style="fill:#a91d1d;stroke:#ff772f;stroke-width:0.660913;stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              x="32.735767"
              y="72.184311"
              width="25.755289"
              height="9.318388"
              id="rect47"
              style="fill:#a91d1d;stroke:#ff772f;stroke-width:0.660913;stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              x="32.984486"
              y="82.98037"
              width="25.755289"
              height="9.318388"
              id="rect49"
              style="fill:#a91d1d;stroke:#ff772f;stroke-width:0.660913;stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              x="32.984486"
              y="93.776421"
              width="25.755289"
              height="9.318388"
              id="rect51"
              style="fill:#a91d1d;stroke:#ff772f;stroke-width:0.660913;stroke-linejoin:round;stroke-opacity:0.78544" />
           <rect
              transform="rotate(90)"
              x="67.964371"
              y="-48.157303"
              width="1.4599068"
              height="4.0914259"
              fill="url(#radialGradient146724)"
              id="rect55"
              style="fill:url(#radialGradient146724);stroke:#d9c7a7;stroke-width:0.38882;stroke-linecap:round;stroke-linejoin:round" />
           <rect
              transform="rotate(90)"
              x="89.55648"
              y="-48.157303"
              width="1.4599068"
              height="4.0914259"
              fill="url(#radialGradient149510)"
              id="rect57"
              style="fill:url(#radialGradient149510);stroke:#d9c7a7;stroke-width:0.38882;stroke-linecap:round;stroke-linejoin:round" />
           <rect
              transform="rotate(90)"
              x="100.35254"
              y="-48.157303"
              width="1.4599068"
              height="4.0914259"
              fill="url(#radialGradient149520)"
              id="rect59"
              style="fill:url(#radialGradient149520);stroke:#d9c7a7;stroke-width:0.38882;stroke-linecap:round;stroke-linejoin:round" />
           <rect
              transform="scale(-1)"
              x="-42.62907"
              y="-52.699867"
              width="2.2464445"
              height="8.6419077"
              fill="url(#radialGradient149610)"
              stroke="#8a6e3e"
              stroke-width="0.700964"
              id="rect63"
              style="fill:url(#radialGradient149610);stroke-linecap:round;stroke-linejoin:round" />
           <rect
              transform="rotate(90)"
              x="78.760422"
              y="-48.157303"
              width="1.4599068"
              height="4.0914259"
              fill="url(#radialGradient149738)"
              stroke="#d9c7a7"
              stroke-width="0.38882"
              id="rect65"
              style="fill:url(#radialGradient149738);stroke-linecap:round;stroke-linejoin:round" />
           <rect
              transform="scale(-1)"
              x="-50.841534"
              y="-52.699867"
              width="2.2464445"
              height="8.6419077"
              fill="url(#radialGradient151589)"
              stroke-width="0.700964"
              id="rect67"
              style="fill:url(#radialGradient151589);stroke:#8a6e3e;stroke-linecap:round;stroke-linejoin:round" />
           <g
              id="g994">
             <rect
                x="8.2400427"
                y="6.3651724"
                width="23.72028"
                height="98.379417"
                fill="#ffe7e7"
                stroke="#000006"
                stroke-width="0.506255"
                id="rect36"
                style="stroke-linejoin:round;stroke-opacity:0.78544" />
             <rect
                transform="scale(-1)"
                x="-30.615013"
                y="-63.247421"
                width="1.8641548"
                height="8.3404837"
                fill="url(#radialGradient151593)"
                stroke-width="0.284019"
                id="rect69"
                style="fill:url(#radialGradient151593);stroke:#8a6e3e;stroke-linecap:round;stroke-linejoin:round" />
             <rect
                x="10.144035"
                y="9.4162321"
                width="16.67684"
                height="91.080803"
                fill="url(#radialGradient153802)"
                stroke-width="0.80874"
                id="rect73"
                style="fill:url(#radialGradient153802);stroke:#8a6e3e;stroke-linecap:round;stroke-linejoin:round" />
           </g>
           <g
              id="g989">
             <rect
                x="59.762337"
                y="6.3545885"
                width="23.72028"
                height="98.379417"
                fill="#ffe7e7"
                stroke="#000006"
                stroke-width="0.506255"
                id="rect38"
                style="stroke-linejoin:round;stroke-opacity:0.78544" />
             <rect
                transform="scale(-1)"
                x="-62.973824"
                y="-63.247421"
                width="1.8641548"
                height="8.3404837"
                fill="url(#radialGradient151654)"
                stroke-width="0.284019"
                id="rect71"
                style="fill:url(#radialGradient151654);stroke:#8a6e3e;stroke-linecap:round;stroke-linejoin:round" />
             <rect
                x="64.656792"
                y="9.4162321"
                width="16.67684"
                height="91.080803"
                fill="url(#radialGradient155758)"
                stroke-width="0.80874"
                id="rect75"
                style="fill:url(#radialGradient155758);stroke:#8a6e3e;stroke-linecap:round;stroke-linejoin:round" />
           </g>
           <g
              fill="#f8f6d3"
              stroke-width="0"
              id="g91"
              transform="matrix(0.53258521,0,0,0.46019001,-11.02889,-13.461654)">
             <path
                d="M 181.87,149.95 V 43.74 h 7.6717 V 256.16 H 181.87 Z"
                id="path81" />
             <path
                d="m 144.36,43.423 c 6.1226,-0.06739 16.007,-0.06731 21.966,1.55e-4 5.9586,0.06748 0.94926,0.12261 -11.132,0.12252 -12.081,-8.7e-5 -16.956,-0.05528 -10.834,-0.12268 z"
                id="path83" />
             <path
                d="m 22.696,36.491 v -5.5451 h 166.85 v 11.09 H 22.696 Z"
                id="path85" />
             <path
                d="M 22.696,149.95 V 43.74 h 8.4124 V 256.16 H 22.696 Z"
                id="path87" />
             <path
                d="m 22.696,263.63 v -5.7584 h 166.85 v 11.517 H 22.696 Z"
                id="path89" />
           </g>
           <path
              d="M 86.082697,6.2215931 V 104.49977"
              fill="none"
              stroke="#000000"
              stroke-width="0.584673"
              id="path93" />
         </svg>
         
        </div>

1
  • 1
    Все работает. С @keyframes разобрался сам. 17 авг 2021 в 12:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.