Question

我正在制作一个SVG并希望它不按比例缩放（或者至少在一个文件中有4：3和16：9变体）。我试图描绘我想要它的样子 - 注意边框正在变化，但中间的形状是相同的。我在Linux OS上的Inkscape工作。

我的意思，说明（由于声誉不足而无法嵌入图片）：

SparkContext.addSparkListener()

Original SVG

我查看了选项和互联网，但无法找到任何相关内容。我不完全确定要寻找什么。在此先感谢您的帮助！

Answer 1

为SVG提供与较窄宽高比匹配的viewBox。当您将视图扩大时，它会自动按照您的意愿居中。

在下面的示例中，两个SVG是相同的，刚刚为它们分配了不同的width和height。

＆＃13;

/* 4x3 aspect ratio */
svg:nth-child(1) {
  width: 300px;
  height: 225px;
  border: solid 1px black;
}

/* 16x9 aspect ratio */
svg:nth-child(2) {
  width: 400px;
  height: 225px;
  border: solid 1px black;
}

＆＃13;

<svg viewBox="0 0 120 90">
  <rect width="120" height="90" fill="lightgrey"/>
  <circle cx="60" cy="300" r="240" fill="limegreen"/>
  <text x="60" y="50" text-anchor="middle">4 x 3</text>
</svg>

<svg viewBox="0 0 120 90">
  <rect width="120" height="90" fill="lightgrey"/>
  <circle cx="60" cy="300" r="240" fill="limegreen"/>
  <text x="60" y="50" text-anchor="middle">4 x 3</text>
</svg>

＆＃13;

SVG高度和宽度按比例缩放

1 个答案: