【发布时间】：2019-02-02 07:13:44
【问题描述】：
我有一个 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 显示为自身的较小版本，并保留所有比率。 实际：但是，图像不仅会调整大小，还会被剪掉。
【问题讨论】：
标签： html svg nested image-rendering