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

Question

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

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

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

Вот ссылка Jsfiddle.

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

Благодаря

Answer 1

Если вы не хотите, чтобы ваши изображения, чтобы растянуть и разорвать их пропорции, то не используйте 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/stackoverflowissue/kit3.jpg"/> 
 
    <!-- top --> 
 
    <image class="leftImage" clip-path="url(#first)" preserveAspectRatio="xMinYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/> 
 
    <!-- right --> 
 
    <image class="rightImage" clip-path="url(#last)" preserveAspectRatio="xMaxYMid slice" width="100%" height="100%" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/> 
 
    </svg>

Update

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

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

В противном случае вам необходимо приступить к работе с 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/stackoverflowissue/kit2.jpg"/> 
 

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

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

 
</svg>

Answer 2

Вы можете изменить 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/stackoverflowissue/kit3.jpg"/> 
    <!-- top --> 
    <image class="leftImage" clip-path="url(#first)" width="100%" height="100%" x="-450" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit2.jpg"/> 
    <!-- right --> 
    <image class="rightImage" clip-path="url(#last)" width="100%" height="100%" x="200" xlink:href="http://testyourprojects.net/matrix/project/stackoverflowissue/kit1.jpg"/> 
</svg> 

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

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