Как на svg реализовывать не стандартный контур для слайдера изображений?

Question

Оригинал вопроса : toster

Вопрос заинтересовал своей не ординарностью и так ответов не поступило я подключился Реализовал такую конструкцию на SVG :

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 977 662"
   height="462"
   width="577"
   id="svg10"
   version="1.1">
  <pattern id="img1" patternUnits="userSpaceOnUse" width="862px" height="577px">
    <image xlink:href="https://w-dog.ru/wallpapers/4/9/512274817997285/devushka-v-belom-na-krovati.jpg" x="0" y="-200px" width="1262px" height="977px" />
  </pattern>
  <g  id="layer2">
    <path
       id="path3713"
       d="m 575.81019,99.998201 c -422.53698,-2.76167 -425.29865,2.761679 -425.29865,2.761679 l -26.23596,41.4252 -2.76168,142.2265 -34.520998,40.04435 -1.380835,88.37375 23.474273,-11.04672 2.76168,139.46482 24.85512,22.09344 233.36192,-1.38084 -15.18924,33.14015 450.15378,-4.14252 22.09343,-24.85511 5.52336,-165.70078 28.99764,-24.85511 1.38084,-219.55353 -44.18688,-57.995275 -144.98817,-1.38084 -19.33176,38.663515 -96.65879,-4.14252 z"
       style="fill:url(#img1);stroke:#000000;stroke-width:1px;stroke-opacity:0" />
  </g>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 977 662"
   height="462"
   width="577"
   id="svg10"
   version="1.1">
  <pattern id="img1" patternUnits="userSpaceOnUse" width="862px" height="577px">
    <image xlink:href="http://slavyanskaya-kultura.ru/images/photos/79124649f2c1e61210b9b62a7ae9dabb.jpg" x="0" y="-200px" width="1262px" height="977px" />
  </pattern>
  <g  id="layer2">
    <path
       id="path3713"
       d="m 575.81019,99.998201 c -422.53698,-2.76167 -425.29865,2.761679 -425.29865,2.761679 l -26.23596,41.4252 -2.76168,142.2265 -34.520998,40.04435 -1.380835,88.37375 23.474273,-11.04672 2.76168,139.46482 24.85512,22.09344 233.36192,-1.38084 -15.18924,33.14015 450.15378,-4.14252 22.09343,-24.85511 5.52336,-165.70078 28.99764,-24.85511 1.38084,-219.55353 -44.18688,-57.995275 -144.98817,-1.38084 -19.33176,38.663515 -96.65879,-4.14252 z"
       style="fill:url(#img1);stroke:#000000;stroke-width:1px;stroke-opacity:0" />
  </g>

как видно если разные по размеру картинки то они и выглядят не адекватно !

каким образом сделать так что бы при любом размере изображения картинка была от начала и до конца этой фигуры ?

Или я ничего не понял или что тебе мешает задать размер image такой же как и у родителя? — Air, Apr 05 '18 at 07:20
@Air ну как бы .. либо я ни чего не знаю либо не ясно как стилизовать это в автоматическом режиме ... мне Alexfndr-TT в чате подсказал что бы это сделать в процентах но при другом размере изображения выглядит очень коряво — , Apr 05 '18 at 07:25
@Air вот пример - смотри : https://codepen.io/topicstarter/pen/NYLBGY?editors=1000 - image в процентах — , Apr 05 '18 at 07:28
Ну Alexfndr-TT, знает свое дело... Я его мнению доверяю, но мне кажется тут pattern не нужен — Air, Apr 05 '18 at 07:28
@Air не понял про pattern - а каким образом по другому вставлять фон ? — , Apr 05 '18 at 07:29
По ходу или я не прав в корне... Или я что-то делаю не так... — Air, Apr 05 '18 at 07:36
@Air я раньше думал что на SVG только по координатам с листка бумаги я могу сделать ВСЁ а вот ФОН растянуть на всю фигуру оказалось мне не по зубам ... — , Apr 05 '18 at 07:39
Мне тоже)))) Пока ковыряюсь... Не получается фон использовать — Air, Apr 05 '18 at 07:44
А с помощью чего SVG рисовали? Иллюстратор? — DaemonHK, Apr 06 '18 at 06:16
неет ! я рисовал на листке бумаги ... и от туда же брал координаты ... у меня слабый комп и не тянет редакторы svg ...скоро куплю по мощнее и тогда будет проще — , Apr 06 '18 at 07:12

score 4 · Accepted Answer · 2018-04-05T07:58:29.123

Нашёл ответ в сети : сменил атрибут patternUnits="userSpaceOnUse" на этот patternUnits="objectBoundingBox" и вроде бы похоже на решение

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 977 662" height="462"
  width="577" id="svg10" version="1.1">
  <pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
    <image xlink:href="https://sxodim.com/uploads/astana/2015/05/deti1.jpg" x="0" y="0" width="100%" height="100%"  />
  </pattern>
  <g  id="layer2">
    <path
       id="path3713"
       d="m 575.81019,99.998201 c -422.53698,-2.76167 -425.29865,2.761679 -425.29865,2.761679 l -26.23596,41.4252 -2.76168,142.2265 -34.520998,40.04435 -1.380835,88.37375 23.474273,-11.04672 2.76168,139.46482 24.85512,22.09344 233.36192,-1.38084 -15.18924,33.14015 450.15378,-4.14252 22.09343,-24.85511 5.52336,-165.70078 28.99764,-24.85511 1.38084,-219.55353 -44.18688,-57.995275 -144.98817,-1.38084 -19.33176,38.663515 -96.65879,-4.14252 z"
       style="fill:url(#img1);stroke:#000000;stroke-width:1px;stroke-opacity:0" />
  </g>
  </svg>

информация по решению здесь

Век живи век учись)))))) Это я о себе)) — Air, Apr 05 '18 at 07:55
@Максим Ленский сам решил, значит вдвойне молодец. Раз решение устраивает, то значит, я могу порешать другие вопросы. Накопилось — Alexandr_TT, Apr 05 '18 at 16:28
А что делать если это все таки слайдер? То есть в каждый слайд помещать эту свгэху и заполнять ее картинкой? — DaemonHK, Apr 06 '18 at 06:17
обернуть каждую фигуру в блок и уже на него вешать слайдер ... — , Apr 06 '18 at 07:13

Как на svg реализовывать не стандартный контур для слайдера изображений?

1 Answers1