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 you have read our privacy policy.

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