9

我已尽力将其简化为一个最小的工作示例，但请原谅底部的代码墙。我有一组路径，在这种特殊情况下，它们拼写单词“DOG”。我想在不保留纵横比的情况下缩放它们以适应盒子。例如，使用合适的DOGI 定义：

 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

在此处输入图像描述

我无法弄清楚，使用preserveAspectRatio='none'或任何其他技巧来让我DOG在（下部）窗口中完全适合。结果总是被剪裁。我可以尝试猜测，viewBox但这很脆弱，我不应该在这里的 DOM 的上层做到这一点吗？

下面列出了 SVG 的完整代码：

<svg version="1.2" width="400.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

 <defs>

  <symbol id="DOG">
   <defs>
    <g>
     <symbol id="letter_D" overflow="visible">
      <path d="M 131.5 -66.953125 C 131.5 -104.609375 106.203125 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 73.71875 0 C 105.796875 0 131.5 -29.484375 131.5 -66.953125 Z M 116.765625 -66.953125 C 116.765625 -38.859375 108.59375 -27.5 104.8125 -22.109375 C 100.03125 -15.9375 88.671875 -5.1875 69.734375 -5.1875 L 47.421875 -5.1875 C 39.453125 -5.1875 39.046875 -6.171875 39.046875 -12.953125 L 39.046875 -123.140625 C 39.046875 -129.90625 39.453125 -130.90625 47.421875 -130.90625 L 69.734375 -130.90625 C 86.28125 -130.90625 116.765625 -121.140625 116.765625 -66.953125 Z " style="stroke:none;">
      </path>
     </symbol>
     <symbol id="letter_O" overflow="visible">
      <path d="M 134.09375 -67.75 C 134.09375 -108.59375 104.8125 -139.28125 71.734375 -139.28125 C 37.859375 -139.28125 9.171875 -108.1875 9.171875 -67.75 C 9.171875 -27.296875 38.25 3.1875 71.53125 3.1875 C 105.609375 3.1875 134.09375 -27.890625 134.09375 -67.75 Z M 118.953125 -70.328125 C 118.953125 -22.3125 93.640625 -0.40625 71.734375 -0.40625 C 49.015625 -0.40625 24.3125 -23.109375 24.3125 -70.328125 C 24.3125 -117.359375 51.40625 -135.6875 71.53125 -135.6875 C 92.65625 -135.6875 118.953125 -116.765625 118.953125 -70.328125 Z " style="stroke:none;">
      </path>
     </symbol>
     <symbol id="letter_G" overflow="visible">
      <path d="M 136.6875 -48.21875 L 136.6875 -53.40625 C 131.90625 -53 121.140625 -53 115.765625 -53 L 87.078125 -53.40625 L 87.078125 -48.21875 L 93.046875 -48.21875 C 110.1875 -48.21875 110.578125 -46.03125 110.578125 -38.859375 L 110.578125 -25.703125 C 110.578125 -3.78125 84.6875 -2 78.5 -2 C 57.984375 -2 24.3125 -16.140625 24.3125 -68.140625 C 24.3125 -120.140625 57.390625 -134.09375 76.71875 -134.09375 C 99.21875 -134.09375 115.5625 -114.5625 119.34375 -86.875 C 119.75 -84.484375 119.75 -84.078125 121.546875 -84.078125 C 123.734375 -84.078125 123.734375 -84.484375 123.734375 -88.0625 L 123.734375 -135.296875 C 123.734375 -138.875 123.53125 -139.078125 122.34375 -139.078125 C 121.546875 -139.078125 121.34375 -138.875 119.953125 -136.484375 L 111.1875 -119.75 C 101.421875 -132.109375 89.46875 -139.28125 74.125 -139.28125 C 40.046875 -139.28125 9.171875 -109.1875 9.171875 -68.140625 C 9.171875 -27.296875 39.453125 3.1875 74.515625 3.1875 C 90.65625 3.1875 106.40625 -2.59375 112.578125 -13.953125 C 115.96875 -5.78125 121.546875 -0.203125 122.53125 -0.203125 C 123.53125 -0.203125 123.734375 -0.40625 123.734375 -3.984375 L 123.734375 -39.65625 C 123.734375 -47.21875 124.328125 -48.21875 136.6875 -48.21875 Z " style="stroke:none;">
      </path>
     </symbol>
    </g>
   </defs>
   <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
     <use x="-10.359" xlink:href="#letter_D" y="139.247"/>
     <use x="130.512871" xlink:href="#letter_O" y="139.247"/>
     <use x="273.975031" xlink:href="#letter_G" y="139.247"/>
   </g>
  </symbol>
 </defs>

</svg>
4

2 回答 2

15

你也可以使用ViewBoxwithpreserveAspectRatio="none"来获得一个结果，在我看来，它几乎总是给我想要的结果。这样您就不必进行计算来指定转换，而是决定您绘制的画布有多大，然后自动将其缩放到所需的大小......

例子：

<svg style="width: 500px; height: 800px;" viewBox="0 0 610 1340" preserveAspectRatio="none">

您知道您的绘图将在 viewBox 大小内绘制，但结果必须适合 500x800 大小的窗口，无论是否保留纵横比。

编辑：我知道你说“不保留纵横比”，但你仍然需要决定你想要做什么。您可以缩放/拉伸或剪辑。这些选项在 preserveAspectRatio 规范下进行了概述。

于 2014-04-22T11:43:23.160 回答
13

transform在外部<g>容器的属性中使用比例。

transform="scale(x, y)"

使用一点 JavaScript，您可以找到任意路径的维度：

var box = path.getBBox();
var eleWidth = box.width, eleHeight = box.height;
于 2013-02-15T23:15:52.853 回答