Использование clipPathUnits = "objectBoundingBox" приводит к исчезновению пути клипа - PullRequest
Новая
       13

Использование clipPathUnits = "objectBoundingBox" приводит к исчезновению пути клипа

1 голос
/ 10 июля 2020

Проблема:

Я создал SVG Clip Path , который должен реагировать, но когда я пытаюсь использовать clipPathUnits="objectBoundingBox" в теге пути клипа, он делает цель объект исчезнет.

Я сделал примеры сниппетов с и без. Первый показывает, как ожидалось , но второй полностью скрыт.

Я тестировал его с различными простыми формами и путями, которые работают нормально, но я не могу получить clipPathUnits="objectBoundingBox" работаю с чем-то более сложным, не уверен, что мне не хватает.

Фрагмент: 

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" >
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

Ресурсы:

https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits

https://www.sarasoueidan.com/blog/css-svg-clipping/

1 Ответ

1 голос
/ 10 июля 2020

При использовании clipPathUnits="objectBoundingBox" ширина и высота ограничивающего прямоугольника объекта на траектории отсечения считаются имеющими длину, равную 1 единице.

Для этого вам либо нужно переписать d атрибут пути или вы можете масштабировать путь. В этом случае я использую transform="scale(0.00118,0.0017)"

 <clipPath id="wav" clipPathUnits="objectBoundingBox">
            <path transform="scale(0.00118,0.0017)" id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.....

Чтобы узнать, какое значение использовать

  1. , я получаю ограничивающую рамку пути:

    let bb = thePath.getBBox ();

  2. Я использую bb.width и bb.height, чтобы получить масштаб:

    let sx = 1 / bb .ширина; let sy = 1 / bb.height

  3. Я масштабирую путь:

    thePath.setAttribute ("преобразование", scale(${sx},${sy})) 

body {
  background: #333;
}

#hero {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav);
}

#hero2 {
  background: url(https://source.unsplash.com/random);
  height: 120vh;
  background-color: #ff0000;
  width: 100vw;
  background-size: cover;
  clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav" clipPathUnits="objectBoundingBox">
        <path transform="scale(0.00118,0.0017)"  id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>


<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <clipPath id="wav2" clipPathUnits="objectBoundingBox">
        <path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
      </clipPath>       
  </svg>

Это из статьи Сары Суейдан:

при использовании значения objectBoundingBox координаты, указанные для содержимого <clipPath> должно быть в диапазоне [0, 1]

И это из MDN:

objectBoundingBox Это значение указывает, что все координаты внутри элемента относятся к ограничивающая рамка элемента, к которому применяется обтравочный контур. Это означает, что началом системы координат является верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта считаются имеющими длину, равную 1 единице.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...