被SVG viewBox，宽度，高度等困扰 [英] Perplexed by SVG viewBox, width, height, etc
问题描述
如果我对SVG的理解是正确的，则以下两个SVG描述将产生相同的图像，但事实并非如此. (注意:两个代码清单的唯一区别在于它们的svg标记中的坐标值.更具体地说，对于第一个清单中的每个( x ， y )对，第二个列表中的( x -205， y -55)对.)
If my understanding of SVG were correct, the following two SVG descriptions would result in identical images, but they don't. (NOTE: The two code listings differ only in the coordinate values in their svg tags. More specifically, for every (x, y) pair in the first listing there's an (x-205, y-55) pair in the second listing.)
<!DOCTYPE html>
<html>
<head><title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="0" y="0" width="210" height="60" viewBox="0 0 210 60">
<g style="stroke: black; fill: none;">
<path d="M 5 5 Q 105 55 205 55"/>
</g>
</svg>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5">
<g style="stroke: black; fill: none;">
<path d="M -200 -50 Q -100 0 0 0"/>
</g>
</svg>
</body>
</html>
事实上，至少根据Firefox而言，它们看起来截然不同.我对它们两个都期望的渲染是Firefox为第一个渲染的(即，曲线从左向右缓缓向下倾斜，初始斜率为-1/2，最终斜率为0).我完全被FF为第二个代码生成的内容所迷惑，因为AFAICT的第二个规范是第一个规范的向量(-205，-55)的简单批发(刚性")翻译.
In fact, according to Firefox at least, they look quite different. The rendering that I expected for both of them is what Firefox delivers for the first one (namely, a curve gently sloping down from left to right, with an initial slope of -1/2 and and final slope of 0). I'm utterly befuddled by what FF produces for the second one, because, AFAICT, the second spec is a simple wholesale ("rigid") translation, by the vector (-205, -55), of the first one.
为什么两个显示器看起来不一样?
Why don't the two displays look identical?
推荐答案
Because the coordinates of viewbox are not x1, y1, x2, y2 - they are minx, miny, width and height.
这篇关于被SVG viewBox，宽度，高度等困扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
