Question

在SVG编程中，添加ViewBox属性后，如果Width/V3与Height/V4两个系数不相等时，SVG图形怎样显示？

我试了一下 SVG图形显示将以Width/V3与Height/V4两个系数最小的那一个作为图形的放缩比例，配合结合平移操作进行显示。不过我就不知道平移距离是通过怎样的一个公式计算出来的？





Answer 1

用以下例子解释：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="500"
height="500"
viewBox="0 100 500 100"
>

<rect x="0" y="100" width="200" height="100" fill="yellow" stroke="blue" />

</svg>

开始解释：
加上viewBox后对比发现，矩形大小没变，但是移动到中间了（垂直居中）。
这是因为，矩形的坐标参数（rect x="0" y="100" width="200" height="100"）
参照的是viewBox的坐标。参照这个坐标画出矩形后，截取这个坐标系中
（0 100 500 100）这块区域，即从点（0,100）开始宽500高100的一块区域（我们称这块区域为A吧），也就是，正好完整的截取了所画的那块矩形，不多不少。然后，我们把A这块区域与svg那块区域（<svg x="0" y="0" width="500" height="500">）,即500X500的区域（我们称之为B区域吧），按区域中心重叠，然后，按比例的拉伸或压缩A的大小，使它恰好包括在B中。

做完这一步后，结果所展示的，就是代码的效果。

Answer 2

这是技术研发问题，不方便透露！