Clip-Path vs Border-Radius проблема при изменении размера окна - PullRequest
Новая
       84

Clip-Path vs Border-Radius проблема при изменении размера окна

0 голосов
/ 31 декабря 2018

Я хочу использовать SVG как clip-path для округления краев изображения.Да, я должен сделать это таким образом по разным причинам.

ПРОБЛЕМА. При изменении размера окна браузера точки и маркеры, образующие закругленные углы, подстраиваются под изменяющийся размер изображения (ограничивающий прямоугольник), поскольку я использую clipPathUnits="ObjectBoundingBox".Это приводит к тому, что закругленные края теряют свою «округлость» и выглядят в целом очень плохо.Свойство CSS border-radius не имеет этой проблемы.Независимо от того, как вы изменяете размер окна браузера, края div, обрезанные border-radius, никогда не теряют свою круглую форму.Проблема наиболее очевидна, когда вы изменяете размер окна браузера до его самого узкого или самого широкого возможного состояния.Попробуйте это с этим codepen , и вы поймете, что я имею в виду.Верхнее изображение использует border-radius, а нижнее изображение использует clip-path.Есть ли способ заставить ЕДИНСТВЕННО скругленные края SVG-пути клипа оставаться одинаково закругленными независимо от того, как изменяется размер изображения, не жертвуя отзывчивостью размеров пути клипа?Это вообще возможно?Я полностью открыт для решения JavaScript, если оно есть.Спасибо!

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете обмануть элемент <svg>, чтобы иметь такие же размеры, что и изображение, а затем задать размер пути клипа в относительных единицах.Недостатком является то, что вы не можете повторно использовать эти пути, но должны определить один для каждого отдельного изображения. 

.box {
  left: 5%;
  height: 40%;
  position: absolute;
  background-color: blue;
  overflow: hidden;
}
#box1 {
  top: 5%;
  width: 50%;
  clip-path: url(#clipPath1);
}
#box2 {
  top: 55%;
  width: 90%;
  clip-path: url(#clipPath2);
}

.flower{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

svg {
  width: 100%;
  height: 100%;
  position: absolute;
}
<div class="box" id="box1">
    <img class="flower" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="none">
    <svg>
        <clipPath id="clipPath1" clipPathUnits="userSpaceOnUse">
            <rect width="100%" height="100%" rx="20" ry="20"/>
      </clipPath>
    </svg>
</div>
<div class="box" id="box2">
    <img class="flower" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="none">
    <svg>
        <clipPath id="clipPath2" clipPathUnits="userSpaceOnUse">
            <rect width="100%" height="100%" rx="20" ry="20"/>
      </clipPath>
    </svg>
</div>
...