У меня есть SVG, который я хочу поместить в меньшую коробку, сохраняя при этом все соотношения.Я пытаюсь сделать это, вложив SVG в другой SVG с меньшими номерами ширины / высоты и окна просмотра, но вместо изменения размера изображение обрезается.
Я попытался вложить оригинальный SVG внутрьдругой SVG с другими номерами окна просмотра.
Оригинальный SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.0" width="2060.0" height="1340.0" xml:space="preserve" viewBox="0.0 0.0 2060.0 1340.0">
<!-- The artwork image. -->
<image dragTarget="true" scaleTarget="true" dragConstraint="canvas-front-rect" scaleConstraint="canvas-front-rect" id="artwork-image" x="5" y="-100.0" width="2400" height="1500"
preserveAspectRatio="xMidYMid slice" xlink:href="https://www.printbit.com/wp-content/uploads/2017/06/happy-people.jpg" />
<!-- The "sides" -->
<g transform="scale(1, -1) translate(0, -140)" >
<use clip-path="url(#clip-path-top)" xlink:href="#artwork-image" />
</g>
<g transform="scale(1, -1) translate(0, -2540)" >
<use clip-path="url(#clip-path-bottom)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-140, 0)" >
<use clip-path="url(#clip-path-left)" xlink:href="#artwork-image" />
</g>
<g transform="scale(-1, 1) translate(-3980, 0)" >
<use clip-path="url(#clip-path-right)" xlink:href="#artwork-image" />
</g>
<!-- Constraint information -->
<rect id="canvas-front-rect" constraint="gte" x="70.0" y="70.0" width="1920.0" height="1200.0" stroke-width="1" stroke="#0000FF" fill="none" visibility="visible" />
<!-- Clip path definitions for the mirroring -->
<defs>
<clipPath id="clip-path-top"> <rect x="70.0" y="70.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-bottom"> <rect x="70.0" y="1200.0" width="1920.0" height="70.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-left"> <rect x="70.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/> </clipPath>
<clipPath id="clip-path-right"> <rect x="1920.0" y="70.0" width="70.0" height="1200.0" stroke="#00FF00" fill="none"/></clipPath>
</defs>
</svg>
, и я пытаюсь вложить это в
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0.0"
y="0.0"
width="492.16"
height="406.83"
xml:space="preserve"
viewBox="0.0 0.0 492.16 406.83"
></svg>
Ожидаемый результат: я хочу, чтобы оригинальный SVG отображался как уменьшенная версиясам, со всеми соотношениями сохранен.Фактически: однако, вместо того, чтобы просто изменить размер, изображение обрезается.