1

Есть SVG изображения в виде клавиш. Одна из них многоугольной формы, что "обтекает" другую кнопку. Размеры и положение контента этих кнопок одинаковые, тем самым, один накладывается на другой. Хочу сделать из них ссылки, но из-за наложения активна только одна кнопка. Есть ли возможность сделать пустой контент прозрачным? Пытался использовать pointer-events:none и pointer-events:fill, но чёт ничего не происходит.

.button-enter,
.button-back {
  position: absolute;
}

.buttons {
  width: 165px;
  height: 196px;
  position: fixed;
  bottom: 3%;
  left: 50%;
  margin-left: -90px;
  margin-bottom: 5px;
}

.button-back {
  width: 240px;
}

.button-enter {
  width: 240px;
}

#enter-button,
#back-button {
  transition: 0.2s;
}

#enter-button:hover,
#back-button:hover {
  transform: scale(0.99);
}

.buttons-style {
  fill: rgba(0, 0, 0, 0);
  stroke: #555555;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
}

#text-back,
#text-enter {
  fill: #555555;
}
<div class="buttons">
  <div class="button-back">
    <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 181.5 187.5" style="enable-background:new 0 0 181.5 187.5;" xml:space="preserve">
            <a xlink:href="#">
              <g id="back-button">
            	   <g id="text-back">
                   <path d="M9.7,144.8c0,0.2-0.1,0.3-0.3,0.5s-0.4,0.2-0.8,0.2H4.5c-0.4,0-0.6-0.3-0.6-0.6v-7.6c0-0.4,0.3-0.6,0.6-0.6h4.2
              			c0.3,0,0.6,0.1,0.8,0.2s0.3,0.3,0.3,0.5v2.7c0,0.2-0.2,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.7,0.3c-0.3,0.1,0,0.2,0,0.2l0.8,0.3
              			c0.3,0.1,0.5,0.3,0.5,0.6V144.8z M8.4,139.5v-1.6c0-0.4-0.3-0.6-0.6-0.6H5.8c-0.4,0-0.6,0.3-0.6,0.6v1.9c0,0.4,0.3,0.6,0.6,0.6H7
              			c0.1,0,0.2,0,0.2,0l0.8-0.3C8.2,140,8.4,139.8,8.4,139.5z M8.4,144.1v-2c0-0.3-0.2-0.5-0.4-0.6l-0.8-0.3c-0.1,0-0.2,0-0.2,0H5.8
              			c-0.4,0-0.6,0.3-0.6,0.6v2.3c0,0.4,0.3,0.6,0.6,0.6h2C8.1,144.8,8.4,144.5,8.4,144.1z"/>
              		 <path d="M15.1,145.5h-1v-0.2c-0.4,0-0.8,0.1-1.2,0.1c-0.5,0-0.9,0.1-1.2,0.1c-0.6,0-0.9-0.2-0.9-0.6v-2c0-0.4,0.3-0.6,0.9-0.6h1.8
              			c0.4,0,0.6-0.3,0.6-0.6v-0.4c0-0.4-0.3-0.6-0.6-0.6h-1.3c0,0-0.3-0.1-0.3,0.3c0,0.3,0,0.4,0,0.4s0.1,0.3-0.3,0.3
              			c-0.4,0-0.4,0-0.4,0s-0.3,0-0.3-0.3c0-0.3,0-0.7,0-0.7c0-0.4,0.3-0.6,0.9-0.6h2.5c0.6,0,0.9,0.2,0.9,0.6V145.5z M14.1,144.2v-0.7
              			c0-0.4-0.3-0.6-0.6-0.6h-1c-0.4,0-0.6,0.3-0.6,0.6v0.7c0,0.4,0.3,0.7,0.7,0.6l1,0C13.8,144.8,14.1,144.5,14.1,144.2z"/>
              		 <path d="M20.9,144.9c0,0.4-0.3,0.6-0.9,0.6h-2.5c-0.6,0-0.9-0.2-0.9-0.6v-4.3c0-0.4,0.3-0.6,0.9-0.6H20c0.6,0,0.9,0.2,0.9,0.6v0.9
              			c0,0,0,0.2-0.2,0.2c-0.2,0-0.4,0-0.6,0c-0.2,0-0.2-0.2-0.2-0.2s0-0.3,0-0.6c0-0.3-0.3-0.2-0.3-0.2h-1.2c-0.4,0-0.6,0.3-0.6,0.6
              			v2.9c0,0.4,0.3,0.6,0.6,0.6h1.3c0,0,0.3,0,0.3-0.3c0-0.2,0-0.6,0-0.7c0-0.3,0.2-0.2,0.2-0.2h0.6c0,0,0.2,0,0.2,0.2
              			C20.9,144.1,20.9,144.9,20.9,144.9z"/>
              		 <path d="M27.8,145.5c-0.4,0-1,0-1,0c-0.2,0-0.3-0.1-0.4-0.2l-1.8-1.7c-0.4-0.4-1.1-0.1-1.1,0.5v0.7c0,0.4-0.3,0.6-0.6,0.6h-0.1
              			c-0.4,0-0.6-0.3-0.6-0.6v-7.6c0-0.4,0.3-0.6,0.6-0.6h0.1c0.4,0,0.6,0.3,0.6,0.6v3.7c0,0.5,0.6,0.8,1,0.5l1.7-1.3
              			c0.1-0.1,0.3-0.1,0.4-0.1h1c0,0,0.3,0.1,0,0.3c-0.3,0.2-2.3,1.7-2.3,1.7c-0.3,0.2-0.3,0.7,0,1l2.6,2.3
              			C28,145.2,28.3,145.5,27.8,145.5z"/>
              	</g>
              	<path class="buttons-style" d="M2.6,67.4h52.8c0.9,0,1.7,0.8,1.7,1.7V146c0,0.9-0.8,1.7-1.7,1.7H2.6c-0.9,0-1.7-0.8-1.7-1.7V69.1
  		           C0.9,68.2,1.7,67.4,2.6,67.4z"/>
              </g>
            </a>
          </svg>
  </div>
  <div class="button-enter">
    <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 181.5 187.5" style="enable-background:new 0 0 181.5 187.5;pointer-events:none;" xml:space="preserve">
            <a xlink:href="#">
              <g id="enter-button">
            	   <g id="text-enter">
                   <path id="e_1_" d="M92.3,19.5h-6.4c-0.2,0-0.4-0.2-0.4-0.4v-15c0-0.2,0.2-0.4,0.4-0.4h6.2c0,0,0.2,0,0.2,0.2c0,0.1,0,0.8,0,0.9
              			c0,0.1-0.2,0.2-0.2,0.2h-4.4c-0.2,0-0.4,0.2-0.4,0.4v5c0,0.2,0.2,0.4,0.4,0.4h3.9c0,0,0.2,0,0.2,0.2c0,0.2,0,0.7,0,0.9
              			c0,0.2-0.2,0.2-0.2,0.2h-3.9c-0.2,0-0.4,0.2-0.4,0.4v5.3c0,0.2,0.2,0.4,0.4,0.4h4.5c0,0,0.1,0,0.1,0.1c0,0.1,0,0.9,0,1
              			C92.4,19.5,92.3,19.5,92.3,19.5z"/>
              		 <path id="n" d="M99.9,19.6h-1.6v-8.7L94.7,11v8.6h-1.6V9.7h1.6V10c0.6-0.1,1.3-0.1,1.9-0.2c0.8-0.1,1.4-0.1,1.9-0.1
              			c0.9,0,1.3,0.4,1.3,1.1V19.6z"/>
              		 <path id="t" d="M105.1,18.5v1.3H103c-0.6,0-1.1-0.5-1.1-1.1v-8h-1.3V9.3h1.3V6.1h1.4v3.1c0,0.1,0.1,0.2,0.2,0.2h1.7v1.3h-1.7
              			c-0.1,0-0.2,0.1-0.2,0.2v7.8H105.1z"/>
              		 <path id="e" d="M113.7,18.7c0,0.8-0.4,1.2-1.2,1.2h-3.4c-0.8,0-1.2-0.4-1.2-1.2v-8c0-0.8,0.4-1.2,1.2-1.2h3.4
              			c0.8,0,1.2,0.4,1.2,1.2c0,0,0,3.3,0,3.8c0,0.5-0.5,0.5-0.5,0.5h-4v3.8h3.1v-1.9h1.4V18.7z M112.3,13.8v-3.1h-3.1v3.1H112.3z"/>
              		 <path id="r" d="M121.3,10.8c-0.1,0-1.2,0-1.2,0s-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.1-0.1l-1.4,0
              			c-0.6,0-1.1,0.5-1.1,1.1v8h-1.4V9.2h1.4v0.3c0.5-0.1,0.9-0.1,1.4-0.2c0.6-0.1,1-0.1,1.4-0.1c0.8,0,1.2,0.4,1.2,1.2v0.4
              			C121.4,10.7,121.4,10.8,121.3,10.8z"/>
            	   </g>
            	   <path style="pointer-events:fill;" id="button-enter" class="buttons-style" d="M20.4,1.9l-0.2,56.8c0,0.5,0.4,0.9,0.9,0.9h42.1c0.6,0,1,0.5,1.1,1l0.4,67.3
  		            c0,0.5,0.4,0.9,0.9,0.9l57.4,0.3c0.5,0,0.9-0.4,0.9-0.9L123.2,1.9c0-0.5-0.4-0.9-0.9-0.9H21.2C20.7,1.1,20.4,1.5,20.4,1.9z"/>
              </g>
            </a>
          </svg>
  </div>
</div>

1 ответ 1

1

Я добавил pointer-events:none для div и svg и pointer-events:all для <g>, в которых непосредственно лежит фигура кнопки и ее текст, и вот результат:

.button-enter,
.button-back {
  position: absolute;
}

.buttons {
  width: 165px;
  height: 196px;
  position: fixed;
  bottom: 3%;
  left: 50%;
  margin-left: -90px;
  margin-bottom: 5px;
}

.button-back {
  width: 240px;
  pointer-events:none; /*added*/
}

.button-enter {
  width: 240px;
  pointer-events:none;/*added*/
}

#enter-button,
#back-button {
  transition: 0.2s;
}

#enter-button:hover,
#back-button:hover {
  transform: scale(0.99);
}

.buttons-style {
  fill: rgba(0, 0, 0, 0);
  stroke: #555555;
  stroke-width: 1.5;
  stroke-miterlimit: 10;
}

#text-back,
#text-enter {
  fill: #555555;
}
<div class="buttons">
  <div class="button-back">
    <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 181.5 187.5" style="enable-background:new 0 0 181.5 187.5;pointer-events:none" xml:space="preserve">
            <a xlink:href="#">
              <g id="back-button" style="pointer-events:all;">
            	   <g id="text-back">
                   <path d="M9.7,144.8c0,0.2-0.1,0.3-0.3,0.5s-0.4,0.2-0.8,0.2H4.5c-0.4,0-0.6-0.3-0.6-0.6v-7.6c0-0.4,0.3-0.6,0.6-0.6h4.2
              			c0.3,0,0.6,0.1,0.8,0.2s0.3,0.3,0.3,0.5v2.7c0,0.2-0.2,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.7,0.3c-0.3,0.1,0,0.2,0,0.2l0.8,0.3
              			c0.3,0.1,0.5,0.3,0.5,0.6V144.8z M8.4,139.5v-1.6c0-0.4-0.3-0.6-0.6-0.6H5.8c-0.4,0-0.6,0.3-0.6,0.6v1.9c0,0.4,0.3,0.6,0.6,0.6H7
              			c0.1,0,0.2,0,0.2,0l0.8-0.3C8.2,140,8.4,139.8,8.4,139.5z M8.4,144.1v-2c0-0.3-0.2-0.5-0.4-0.6l-0.8-0.3c-0.1,0-0.2,0-0.2,0H5.8
              			c-0.4,0-0.6,0.3-0.6,0.6v2.3c0,0.4,0.3,0.6,0.6,0.6h2C8.1,144.8,8.4,144.5,8.4,144.1z"/>
              		 <path d="M15.1,145.5h-1v-0.2c-0.4,0-0.8,0.1-1.2,0.1c-0.5,0-0.9,0.1-1.2,0.1c-0.6,0-0.9-0.2-0.9-0.6v-2c0-0.4,0.3-0.6,0.9-0.6h1.8
              			c0.4,0,0.6-0.3,0.6-0.6v-0.4c0-0.4-0.3-0.6-0.6-0.6h-1.3c0,0-0.3-0.1-0.3,0.3c0,0.3,0,0.4,0,0.4s0.1,0.3-0.3,0.3
              			c-0.4,0-0.4,0-0.4,0s-0.3,0-0.3-0.3c0-0.3,0-0.7,0-0.7c0-0.4,0.3-0.6,0.9-0.6h2.5c0.6,0,0.9,0.2,0.9,0.6V145.5z M14.1,144.2v-0.7
              			c0-0.4-0.3-0.6-0.6-0.6h-1c-0.4,0-0.6,0.3-0.6,0.6v0.7c0,0.4,0.3,0.7,0.7,0.6l1,0C13.8,144.8,14.1,144.5,14.1,144.2z"/>
              		 <path d="M20.9,144.9c0,0.4-0.3,0.6-0.9,0.6h-2.5c-0.6,0-0.9-0.2-0.9-0.6v-4.3c0-0.4,0.3-0.6,0.9-0.6H20c0.6,0,0.9,0.2,0.9,0.6v0.9
              			c0,0,0,0.2-0.2,0.2c-0.2,0-0.4,0-0.6,0c-0.2,0-0.2-0.2-0.2-0.2s0-0.3,0-0.6c0-0.3-0.3-0.2-0.3-0.2h-1.2c-0.4,0-0.6,0.3-0.6,0.6
              			v2.9c0,0.4,0.3,0.6,0.6,0.6h1.3c0,0,0.3,0,0.3-0.3c0-0.2,0-0.6,0-0.7c0-0.3,0.2-0.2,0.2-0.2h0.6c0,0,0.2,0,0.2,0.2
              			C20.9,144.1,20.9,144.9,20.9,144.9z"/>
              		 <path d="M27.8,145.5c-0.4,0-1,0-1,0c-0.2,0-0.3-0.1-0.4-0.2l-1.8-1.7c-0.4-0.4-1.1-0.1-1.1,0.5v0.7c0,0.4-0.3,0.6-0.6,0.6h-0.1
              			c-0.4,0-0.6-0.3-0.6-0.6v-7.6c0-0.4,0.3-0.6,0.6-0.6h0.1c0.4,0,0.6,0.3,0.6,0.6v3.7c0,0.5,0.6,0.8,1,0.5l1.7-1.3
              			c0.1-0.1,0.3-0.1,0.4-0.1h1c0,0,0.3,0.1,0,0.3c-0.3,0.2-2.3,1.7-2.3,1.7c-0.3,0.2-0.3,0.7,0,1l2.6,2.3
              			C28,145.2,28.3,145.5,27.8,145.5z"/>
              	</g>
              	<path class="buttons-style" d="M2.6,67.4h52.8c0.9,0,1.7,0.8,1.7,1.7V146c0,0.9-0.8,1.7-1.7,1.7H2.6c-0.9,0-1.7-0.8-1.7-1.7V69.1
  		           C0.9,68.2,1.7,67.4,2.6,67.4z"/>
              </g>
            </a>
          </svg>
  </div>
  <div class="button-enter">
    <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 181.5 187.5" style="enable-background:new 0 0 181.5 187.5;pointer-events:none;" xml:space="preserve">
            <a xlink:href="#">
              <g id="enter-button" style="pointer-events:all;">
            	   <g id="text-enter">
                   <path id="e_1_" d="M92.3,19.5h-6.4c-0.2,0-0.4-0.2-0.4-0.4v-15c0-0.2,0.2-0.4,0.4-0.4h6.2c0,0,0.2,0,0.2,0.2c0,0.1,0,0.8,0,0.9
              			c0,0.1-0.2,0.2-0.2,0.2h-4.4c-0.2,0-0.4,0.2-0.4,0.4v5c0,0.2,0.2,0.4,0.4,0.4h3.9c0,0,0.2,0,0.2,0.2c0,0.2,0,0.7,0,0.9
              			c0,0.2-0.2,0.2-0.2,0.2h-3.9c-0.2,0-0.4,0.2-0.4,0.4v5.3c0,0.2,0.2,0.4,0.4,0.4h4.5c0,0,0.1,0,0.1,0.1c0,0.1,0,0.9,0,1
              			C92.4,19.5,92.3,19.5,92.3,19.5z"/>
              		 <path id="n" d="M99.9,19.6h-1.6v-8.7L94.7,11v8.6h-1.6V9.7h1.6V10c0.6-0.1,1.3-0.1,1.9-0.2c0.8-0.1,1.4-0.1,1.9-0.1
              			c0.9,0,1.3,0.4,1.3,1.1V19.6z"/>
              		 <path id="t" d="M105.1,18.5v1.3H103c-0.6,0-1.1-0.5-1.1-1.1v-8h-1.3V9.3h1.3V6.1h1.4v3.1c0,0.1,0.1,0.2,0.2,0.2h1.7v1.3h-1.7
              			c-0.1,0-0.2,0.1-0.2,0.2v7.8H105.1z"/>
              		 <path id="e" d="M113.7,18.7c0,0.8-0.4,1.2-1.2,1.2h-3.4c-0.8,0-1.2-0.4-1.2-1.2v-8c0-0.8,0.4-1.2,1.2-1.2h3.4
              			c0.8,0,1.2,0.4,1.2,1.2c0,0,0,3.3,0,3.8c0,0.5-0.5,0.5-0.5,0.5h-4v3.8h3.1v-1.9h1.4V18.7z M112.3,13.8v-3.1h-3.1v3.1H112.3z"/>
              		 <path id="r" d="M121.3,10.8c-0.1,0-1.2,0-1.2,0s-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1c0-0.1-0.1-0.1-0.1-0.1l-1.4,0
              			c-0.6,0-1.1,0.5-1.1,1.1v8h-1.4V9.2h1.4v0.3c0.5-0.1,0.9-0.1,1.4-0.2c0.6-0.1,1-0.1,1.4-0.1c0.8,0,1.2,0.4,1.2,1.2v0.4
              			C121.4,10.7,121.4,10.8,121.3,10.8z"/>
            	   </g>
            	   <path style="pointer-events:fill;" id="button-enter" class="buttons-style" d="M20.4,1.9l-0.2,56.8c0,0.5,0.4,0.9,0.9,0.9h42.1c0.6,0,1,0.5,1.1,1l0.4,67.3
  		            c0,0.5,0.4,0.9,0.9,0.9l57.4,0.3c0.5,0,0.9-0.4,0.9-0.9L123.2,1.9c0-0.5-0.4-0.9-0.9-0.9H21.2C20.7,1.1,20.4,1.5,20.4,1.9z"/>
              </g>
            </a>
          </svg>
  </div>
</div>

2
  • Спасибо, видимо, я глупенький, что вместо того, чтоб закинуть на div'ы данные стили, сразу пошёл задавать вопрос. Блин, я просто подумал, что данные стили никак не будут влиять, если их закинуть выше самих svg. Я немного упростил предложенный Вами код, добавил и сижу - радуюсь. Ещё раз, спасибо :з
    – Criptonium
    15 авг 2019 в 12:52
  • @Criptonium нет проблем, мне кажется лучше сделать это одной svg а не двумя 15 авг 2019 в 12:54

Ваш ответ

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

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