logo标签列表

SVG viewBox缩放和裁剪

htmlsvgcropscaling
3
如何从SVG中输出并缩放特定位置？
例如，我有以下带有SVG的HTML（代码副本和渲染位于http://jsfiddle.net/5e0pas9m/）。
<div style="border: 1px solid black;">1
<svg width="100" height="100" viewBox="0 0 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">2
<svg width="100" height="100" viewBox="0 0 100 100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">3
<svg width="100" height="100" viewBox="100 100 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
</svg>
</div>

<div style="border: 1px solid black;">4
<svg width="100" height="100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none">
  <g transform="scale(1), translate(-100 -100)">
  <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" />
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" />
  </g>
</svg>
</div>
第一层显示我的完整图片。
如果我只想在同一个窗口中显示左上角，我可以设置viewBox="0 0 100 100" (第二层)，它大致符合我的要求：将图像的一部分适配到窗口中。
但是当我对右下角执行相同操作时（第三层表示viewBox="100 100 200 200"），图像仅被平移而没有适配/缩放/缩小。
第四层几乎展示了通过另一种技术实现我的目标的示例。
1个回答
1
viewBox的第三个和第四个参数是宽度和高度，而不是maxX和maxY。因此，您底部右侧示例的viewBox应为"100 100 100 100"。
我真是太丢脸了。我想你可以想象我对这个愚蠢的问题感到多么糟糕。我甚至输入了这个（“100 100 100 100”），但认为这是不正确的行为。 - Hoborg
就我所知，我发现viewBox相当令人困惑，所以至少有一个人认为你不应该感到糟糕！ - user2467065
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接