Эквивалентно проценту положения фона (%) в SVG

У меня есть изображение SVG, которому присвоен эквивалент background-size: cover; с помощью preserveAspectRatio="xMidYMid slice".

Однако на телефонных устройствах размером менее 737 пикселей я бы хотел переместить это изображение влево в его контейнере. Если бы использовалось свойство CSS background, я бы просто сделал background-position: 85%; или подобное.

Есть ли аналогичный способ сделать это с изображениями SVG?

Codepen: https://codepen.io/emilychews/pen/Zqragv

Заранее большое спасибо за любую помощь.

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#section-1, .home-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.home-image, .home-image-wrapper {
  position: absolute;
  right: 0;
}

#home-image-1 {right: 0%}
<section id="section-1">
  
  <div class="home-image-wrapper">
    
    <svg class="home-image" id="home-image-1" width="60%" height="100%">
      <image xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
    </svg>
    
  </div>
  
</section>


person The Chewy    schedule 17.10.2018    source источник
comment
Изображение с атрибутами x and a y`. Используйте эти атрибуты, чтобы перемещать изображение по своему усмотрению.   -  person enxaneta    schedule 17.10.2018
comment
привет @enxaneta, это не сработает - оно перемещает изображение по этим координатам, но не меняет просматриваемую часть изображения, что мне и нужно.   -  person The Chewy    schedule 17.10.2018


Ответы (2)


Установка позиции на элементах svg

Если вы просто хотите изменить элемент svg в контейнере (при условии, что элемент ‹g›). Вы можете применить простое преобразование к любому элементу:

Пример:

<svg viewBox="0 0 100 100" width="300px">
  <!--black rect-->
  <g>
    <rect x="0" y="0" width="20" height="20" />
  </g>
  <!--blue rect-->
  <g transform="translate(20)" fill="#08a">
    <rect x="0" y="20" width="20" height="20" />
  </g>
</svg>

person Persijn    schedule 17.10.2018
comment
привет @persijn, я понимаю о преобразованиях, но я хочу переместить изображение в его контейнере с размером окна ‹ 737 пикселей, чтобы большая часть правой стороны изображения отображалась в соответствии с эквивалентом CSS background-position Если вы можете связать свое ответьте на мой код, пожалуйста, не стесняйтесь, если я неправильно понимаю ваш ответ. Благодарность - person The Chewy; 17.10.2018

В SVG вы можете установить атрибут viewBox. Это определяет x, y, ширину и высоту видимой части SVG. Допустим, ваше изображение jpg имеет ширину 200 и высоту 100. В этом случае вы устанавливаете viewBox="0 0 200 100" по умолчанию на элемент <svg>. На телефонных устройствах вы можете изменить значение viewBox на что-то вроде 50 0 100 100, что будет отображать только средние 100 пикселей изображения.

Подробнее об атрибуте viewBox можно узнать здесь: http://jonibologna.com/svg-viewbox-and-viewport/

person Waruyama    schedule 17.10.2018