在 SVG 绘图中将多个子绘图缩放为相同大小答案

【问题标题】：Scaling multiple sub-drawings to be the same size within an SVG drawing在 SVG 绘图中将多个子绘图缩放为相同大小
【发布时间】：2020-11-10 16:54:06
【问题描述】：

我想创建一个由不同作者在不同程序中创建的绘图网格，并将每个绘图缩小到相同的大小。请注意，所有绘图都将以相同的纵横比创建。

这是一个例子。我尝试使用 preserveAspectRatio 在每个绘图周围设置一个 viewBox 包装器，以使其按比例缩放。我做错了什么？

<svg xmlns="http://www.w3.org/2000/svg" width="18in" height="12in" viewBox="0 0 1296 864">
 <defs>
  <svg width="3.25in" height="5.25in" viewBox="0 0 234 378" preserveAspectRatio="xMinYMin meet">
   <svg id="ad">
    <g transform="matrix(1,0,0,1,-37.5,-37.5)"> <g transform="matrix(1,0,0,1,20,10)"> <ellipse cx="143.406" cy="150.564" rx="107.776" ry="107.172" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M842.64,75L968.522,145.424L920.439,259.373L764.841,259.373L716.758,145.424L842.64,75Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> <g transform="matrix(1,0,0,1,20,-20)"> <rect x="35.629" y="1385.57" width="240.5" height="222.221" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <g transform="matrix(1,0,0,1,25.1242,54.6384)"> <path d="M953.901,1534.08C967.723,1515.42 975,1494.26 975,1472.72C975,1404.99 904.434,1350 817.516,1350C730.598,1350 660.032,1404.99 660.032,1472.72C660.032,1494.26 667.308,1515.42 681.131,1534.08L953.901,1534.08Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M571.57,566.256L620.774,717.688L779.999,717.688L651.183,811.278L700.386,962.71L571.57,869.12L442.755,962.71L491.958,811.278L363.142,717.688L522.367,717.688L571.57,566.256Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g>
   </svg>
  </svg>
  <svg width="3.25in" height="5.25in" viewBox="0 0 234 378" preserveAspectRatio="xMinYMin meet">
   <svg id="il">
    <rect class="cls-1" x="2.6" y="4.45" width="42.14" height="42.14"/><polygon class="cls-1" points="171.37 243.59 95.5 265.83 38.29 211.25 56.96 134.41 132.84 112.17 190.04 166.75 171.37 243.59"/><circle class="cls-1" cx="216.79" cy="17.66" r="13.21"/><circle class="cls-1" cx="216.79" cy="363.73" r="11.68"/><circle class="cls-1" cx="21.7" cy="356.31" r="19.1"/>
   </svg>
  </svg>
 </defs>
 <svg x="0"><use href="#il" /></svg> 
 <svg x="234"><use href="#ad" /></svg> 
</svg>

【问题讨论】：

<use> 元素可以采用width 和height 属性。使用width 和height 设置您需要的大小。使用x 和y 属性定位<use> 元素。您不需要将 use 包装在 svg 元素中
如果我在use 元素上设置宽度和高度，那么它只会裁剪图像，不会缩放它。
您需要一个用于#ad 和#il svg 元素的视图框
你在use元素中添加了width height x和y属性吗？您可以编辑您的问题并将代码替换为您现在拥有的代码吗？
我已经从你告诉我的事情中弄清楚了。我将在下面回答我自己的问题。我可以通过 PayPal 给你一些钱来帮助你吗？

标签： svg

【解决方案1】：

好的，在@enxaneta 的帮助下，我想出了如何完成这项工作。这是生成的文件：

<svg xmlns="http://www.w3.org/2000/svg" width="18in" height="12in" viewBox="0 0 1296 864">
  <defs>
                <svg id="ad" viewBox="0 0 975 1575" spreserveAspectRatio="xMinYMin meet">
                        <g transform="matrix(1,0,0,1,-37.5,-37.5)"> <g transform="matrix(1,0,0,1,20,10)"> <ellipse cx="143.406" cy="150.564" rx="107.776" ry="107.172" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M842.64,75L968.522,145.424L920.439,259.373L764.841,259.373L716.758,145.424L842.64,75Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> <g transform="matrix(1,0,0,1,20,-20)"> <rect x="35.629" y="1385.57" width="240.5" height="222.221" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <g transform="matrix(1,0,0,1,25.1242,54.6384)"> <path d="M953.901,1534.08C967.723,1515.42 975,1494.26 975,1472.72C975,1404.99 904.434,1350 817.516,1350C730.598,1350 660.032,1404.99 660.032,1472.72C660.032,1494.26 667.308,1515.42 681.131,1534.08L953.901,1534.08Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M571.57,566.256L620.774,717.688L779.999,717.688L651.183,811.278L700.386,962.71L571.57,869.12L442.755,962.71L491.958,811.278L363.142,717.688L522.367,717.688L571.57,566.256Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g>
                </svg>
                <svg id="il" viewBox="0 0 234 378" spreserveAspectRatio="xMinYMin meet">
                        <rect class="cls-1" x="2.6" y="4.45" width="42.14" height="42.14"/><polygon class="cls-1" points="171.37 243.59 95.5 265.83 38.29 211.25 56.96 134.41 132.84 112.17 190.04 166.75 171.37 243.59"/><circle class="cls-1" cx="216.79" cy="17.66" r="13.21"/><circle class="cls-1" cx="216.79" cy="363.73" r="11.68"/><circle class="cls-1" cx="21.7" cy="356.31" r="19.1"/>
                </svg>
                
  </defs>
  <use href="#il" width="3.25in" height="5.25in" />
  <use href="#ad" x="3.25in" width="3.25in" height="5.25in" />
</svg>

你必须将原图中的viewBox复制到包裹它的svg元素中，然后你可以在use元素中指定宽度和高度。

【讨论】：