时间戳

首页 > 解决方案 > 为什么我的 SVG 图像在嵌套在另一个 SVG 中时会被剪掉而不是调整大小？

html - 为什么我的 SVG 图像在嵌套在另一个 SVG 中时会被剪掉而不是调整大小？

问题描述

我有一个 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 显示为自身的较小版本，并保留所有比率。实际：但是，图像不仅会调整大小，还会被剪掉。

标签： htmlsvgnestedimage-rendering

解决方案

去掉嵌套<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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0.0" y="0.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>

推荐阅读