Как обрезать определенную область изображения с помощью обтравочной маски SVG

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

Проблема в том, что мой svg получает полную ширину и высоту окна, поэтому изображения также получают полную ширину и высоту.

Так что я хочу, чтобы переместить изображение внутри обтравочного контура, чтобы я мог показать фактическую область изображения

Здесь Jsfiddle ссылка на сайт.

Я не хочу менять соотношение сторон изображения... пожалуйста, дайте мне знать, есть ли способ для этого.

Спасибо

Источник

2 ответа

Если вы не хотите, чтобы ваши изображения растягивались и нарушали соотношение сторон, не используйте preserveAspectRatio="none", Возможно, вы захотите использовать один из "xxx slice" варианты. Ниже я использовал разные для каждого изображения, чтобы выровнять их по левому, центральному и правому краям соответственно.

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}
<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit1.jpg"/>
    </svg>

Обновить

[Я] до сих пор не могу получить точное представление о первом изображении. Я хочу показать лицо девушки. но это не происходит

Одним из решений будет изменение ваших изображений таким образом, чтобы интересующая область находилась в нужной части изображения.

В противном случае вам нужно начать работать с viewBoxes. Однако однажды viewBox Тем не менее, вы больше не можете растягивать родительский SVG, чтобы заполнить ширину и высоту страницы, как в оригинальном примере. Вы должны быть довольны фиксированным соотношением сторон изображения в целом.

Вот один из способов решить вашу проблему:

*{padding:0px; margin: 0px;}
html, body {width: 100%; height: 100%;}
<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2 1">
  <defs>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.3,0 1,0 0.7,1 0,1"/>
    </clipPath>
  </defs>

  <image class="leftImage" preserveAspectRatio="xMaxYMid slice" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit2.jpg"/>

  <image class="rightImage" preserveAspectRatio="xMidYMid slice" x="1" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit1.jpg"/>

  <image class="topImage" preserveAspectRatio="xMidYMid slice" x="0.5" width="1" height="1"
         xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit3.jpg"
         clip-path="url(#mid)"/>

</svg>

Источник

Вы можете изменить x (а может и yтоже) для ваших изображений и примените обратный перевод к их соответствующим путям отсечения.

<!-- language: lang-html -->

<svg version="1.1" id="triagnleSvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none"
         xml:space="preserve">
    <clipPath id="last" clipPathUnits="objectBoundingBox" transform="translate(-200,0)">
        <polygon points="1,0 .78,0 0.58,1 1,1"/>
    </clipPath>
    <clipPath id="first" clipPathUnits="objectBoundingBox" transform="translate(450,0)">
        <polygon points="0,0 0.4,0 0.218,1 0,1"/>
    </clipPath>
    <clipPath id="mid" clipPathUnits="objectBoundingBox">
        <polygon points="0.4,0 0.78,0 0.58,1 0.218,1"/>
    </clipPath>
    <image class="topImage" clip-path="url(#mid)" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit3.jpg"/>
    <!-- top -->
    <image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit2.jpg"/>
    <!-- right -->
    <image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackruissue/kit1.jpg"/>
</svg>

Однако, если вы не фиксируете минимальную и максимальную ширину и высоту svg или его контейнер, вы можете показать пустые части изображения за пределами его границ. Вы можете установить min-height, max-height, min-width, или же max-widthна CSS для SVG или его контейнера.

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

Источник
Другие вопросы по тегам