2

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

Есть такой пример, но не подходит - https://www.html5rocks.com/en/tutorials/masking/adobe/ введите сюда описание изображения

1 ответ 1

3

В общем нарисовал контур (как в примере) и патерном поместил фото и рястянул - собствено дэмо

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 447.63491 248.40051">
  <defs>
    <pattern
       id="pattern"
       patternTransform="matrix(0.67788443,0,0,0.35518436,336.70444,366.21677)"
       height="1068"
       width="1141.3332"
       patternUnits="userSpaceOnUse">
      <image
         y="5.884182e-015"
         x="-3.0433989e-014"
         id="image857"
         xlink:href="https://cs2.livemaster.ru/storage/54/32/fc870a3aa706ff4f4a05930e7dcv--odezhda-plate-bolshie-tsvety.jpg"
         preserveAspectRatio="none"
         height="1068"
         width="1141.3333" />
    </pattern>
  </defs>
  <g
     transform="translate(216.85431,1.6998068)">
      <path
         d="m -181.65379,242.88934 c -11.51211,-3.17704 -13.93065,-3.22999 -23.42124,-0.5128 -4.09789,1.17324 -7.82106,1.82197 -8.2737,1.44165 -0.45264,-0.38034 0.35672,-4.22433 1.79858,-8.54218 2.52597,-7.5644 2.50168,-8.17681 -0.66611,-16.79455 -4.069,-11.0694 -4.06745,-12.05043 0.0369,-23.40451 l 3.32457,-9.19693 -3.61822,-10.52145 -3.61822,-10.52145 3.61822,-10.52144 3.61821,-10.52145 -3.32457,-9.19693 c -4.10502,-11.35593 -4.10633,-12.33392 -0.0315,-23.41907 l 3.29302,-8.95842 -3.56886,-10.531632 c -3.56782,-10.52856 -3.568,-10.53421 -0.61909,-19.292911 3.68578,-10.94731 3.68719,-14.509 0.0101,-25.42839 -2.93922,-8.72806 -2.9391,-8.73149 0.65384,-19.18229 l 3.59354,-10.45267 -3.16167,-8.5989503 c -1.73893,-4.7294296 -2.95711,-8.78404959 -2.70708,-9.01026959 0.25003,-0.22621 5.59549,0.90075 11.87879,2.50436999 l 11.42419,2.91567 12.52592,-3.04123 12.52592,-3.04122999 12.46611,3.02670999 12.46611,3.02671 12.688,-3.03562 12.68799,-3.03561999 12.46489,3.02640999 12.464881,3.02642 12.46489,-3.02642 12.46489,-3.02640999 12.687993,3.03561999 12.68799,3.03562 12.46612,-3.02671 12.46611,-3.02670999 12.52592,3.04122999 12.52593,3.04123 11.10848,-2.83509 c 13.70544,-3.4979 14.24704,-3.49729 27.28284,0.0305 l 10.58889,2.86558 12.87611,-3.08063 12.87611,-3.08062999 12.50281,3.03562999 12.502806,3.03562 12.55747,-3.0044 12.55747,-3.00438999 12.55747,3.00438999 12.55748,3.0044 12.50281,-3.03562 12.50281,-3.03562999 12.89357,3.08480999 12.89358,3.08481 10.06611,-2.74993 c 5.53637,-1.51245999 10.06612,-2.56889999 10.06612,-2.34764999 0,0.22125 -1.42149,4.26931999 -3.15887,8.99570959 -3.1577,8.5903203 -3.15771,8.5964703 -0.0203,17.0065403 3.92585,10.52349 3.93413,14.19786 0.0562,24.91403 -3.08359,8.52125 -3.08354,8.60667 0.0126,17.34055 3.87563,10.93478 3.86603,14.296231 -0.071,24.849791 -3.14099,8.419702 -3.14098,8.421212 0.0203,17.340542 3.92791,11.08227 3.92556,14.41551 -0.0176,24.98545 -3.13741,8.41007 -3.13739,8.41622 0.0203,17.00654 1.73737,4.72639 3.15886,10.25396 3.15886,12.28348 -1.68823,23.67944 -9.70224,54.02037 -3.22516,71.55924 1.70388,4.60002 2.91283,8.51921 2.68657,8.70931 -0.22626,0.19012 -4.97995,-0.82157 -10.56375,-2.2482 -12.67299,-3.23789 -13.53974,-3.23211 -26.90669,0.17939 l -10.94542,2.79348 -12.52175,-3.04022 -12.52176,-3.04022 -12.5954,3.05811 -12.5954,3.0581 -12.46488,-3.02641 -12.46488,-3.02642 -12.614766,3.0181 -12.61477,3.0181 -10.98293,-2.80304 c -13.5107,-3.4482 -13.63417,-3.44816 -27.79839,0.0106 l -11.52199,2.81305 -11.02208,-2.81305 c -6.06267,-1.54777 -12.21962,-2.81365 -13.68264,-2.81365 -1.46302,0 -7.61997,1.26588 -13.68212,2.81305 l -11.02208,2.81303 -11.52199,-2.81305 c -14.2141,-3.47031 -14.65469,-3.46962 -27.63518,0.0431 l -10.554323,2.85623 -12.78017,-3.10297 -12.78016,-3.10291 -12.728471,3.09041 -12.72848,3.09041 -11.76486,-3.10022 -11.76487,-3.10025 -10.53762,2.44085 c -15.2971,3.54329 -17.4212,3.59806 -27.85631,0.71824 z"
         style="fill:url(#pattern);" />
  </g>
</svg>

6
  • Спасибо больше, не подскажешь где рисуются эти svg контуры? Photoshop, Illustrator? 1 дек 2018 в 13:01
  • Это сделано в inkscape 1 дек 2018 в 13:40
  • @Ubuntu User Грамотный подход, хороший ответ (+) Немного правый, нижний угол не дорисован - слишком большая волна и некоторые переходы между волнами получились острыми. Нужно было поставить для этих узловых точек в Inkscape - "Сделать выделенные узлы автоматически сглаженными" 1 дек 2018 в 16:58
  • @Alexandr_TT да вроде бы полная копия - хотя может быть что то я не дорисовал - меня только бесят трансформации но в целом inkscape гененрирует код на много хуже чем тот же corel draw или illustrator но зато inkscape умеет то что не умеют они оба вместе - но хотелось бы узнать как избегать трансформаций именно в этой программе 2 дек 2018 в 5:03
  • 1
    @Ubuntu User трансформации возникают, когда перемещаешь, поворачиваешь, увеличиваешь объект в Inkscape. Тррансформаций не будет, если рисовать "пером" сразу в нужном месте холста и не трансформировать изображение. 2 дек 2018 в 5:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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