SVG ClipPath: Почему применение пути клипа к DIV имеет разные результаты для ИЗОБРАЖЕНИЯ? - PullRequest
Новая
       95

SVG ClipPath: Почему применение пути клипа к DIV имеет разные результаты для ИЗОБРАЖЕНИЯ?

0 голосов
/ 18 апреля 2020

Мне нужно создать набор из 3 треугольников, каждый из которых имеет содержание (изображения, копии и т. Д. c).

Я настроил эту ручку, чтобы примерно показать, чего я пытаюсь достичь : https://codepen.io/andystent/pen/OJyNdmB

И вот изображение для справки:

Screenshot from CodePe results for quick reference

В этом примере «Верхний» и «Левый» треугольники - это ИЗОБРАЖЕНИЯ с примененным и хорошо отображаемым контуром клипа.

«Правый» треугольник (с красным фоном) - это DIV с примененным контуром клипа, но пропорции неправильно.

Это должно выглядеть как зеркальная версия «левого» треугольника.

Когда я применяю его к изображению, оно идеально, но когда я применяю к div это не является. Каков наилучший способ сделать это?

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

Вот HTML и CSS для красного «Правого» треугольника с клипсой, примененной к DIV в CSS: 

#right-wrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  padding: 40px 20px;
  box-sizing: border-box;
}

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="right-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>
<!--      <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
  </svg>
</div>

----- ОБНОВЛЕНИЕ: -----

Как предлагается в комментариях Я создал упрощенную ручку, которая позволяет понять, чего я пытаюсь достичь, а встроенные HTML и CSS находятся ниже.

По сути, я пытаюсь получить красный <div> для обрезки в точности как <image>.

https://codepen.io/andystent/pen/RwWRjLd

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
}
 <svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
   
 <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
  </svg>
  
   <div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>

1 Ответ

1 голос
/ 04 мая 2020

Вот идея, где я буду использовать маску вместо пути клипа. Основной трюк для правильной установки viewBox (он у вас уже есть в вашем коде) добавляет preserveAspectRatio="none", тогда размер маски 100% 100%

.box {
  width:200px;
  height:200px;
  display:inline-block;
  background:red;
}
.mask {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">
...