将 SVG 对象移向原点答案

【问题标题】：Shift SVG objects towards origin将 SVG 对象移向原点
【发布时间】：2014-05-26 20:39:27
【问题描述】：

我正在使用 svgwrite 模块在 Python 中创建一堆不同的 SVG 文件。我需要稍后在网站上展示这些图片。

由于这些图片由不同的数学对象组成，我在整个平面上工作，包括正数和负数。这意味着我需要移动所有对象，以便它们可见并保持结构。有时移动这些对象并不难，但由于我几乎在所有工作中都必须这样做，所以我正在寻找更通用的东西。

所以我正在寻找可以移动所有对象并保持其结构的东西，以便所有内容都可见并且图片的尺寸最小（即宽度/高度）。

我搜索了官方文档，但到目前为止还没有成功，可能只是盲目。

更新为了更清楚，我添加了一个示例

Python 示例：

import svgwrite

im = svgwrite.drawing.Drawing()
im.add(im.line( start = (-10,-10),\
                end   = (20,20),\
                stroke= 'black'))
im.saveas('example.svg')

然后，当我查看 example.svg 时，例如Firefox 将只有部分“积极”部分，即从 [0,0] 到 [20,20] 的行。

或稍有不同的例子：

import svgwrite

im = svgwrite.drawing.Drawing()
im.add(im.line( start = (10,10),\
                end   = (20,20),\
                stroke= 'black'))
im.saveas('example2.svg')

现在 [0,0] 和从 [10,10] 开始的行之间有不必要的间隙。

所以，总结一下。想象一堆 SVG 对象，它们可以在任何地方绘制。我想在所有对象中找到最小的 x_min、y_min 坐标，然后：

如果坐标 x_min (resp. y_min) 为负，则添加 |x_min| (resp. |y_min|) 到所有对象的所有 x (resp. y) 坐标。在哪里 |a|代表a的绝对值
如果坐标 x_min (resp. y_min) 为正，则从所有对象的所有 x (resp. y) 坐标中减去 x_min (resp. y_min)

之后，所有对象都将可见，并且它们将在零处接触一个或两个轴。如下所述，通过移动原点（以相应的方式）可以实现相同的结果。

注意当我在做这件事时，module Image 也有类似的问题。

【问题讨论】：

不清楚你在问什么。可以举个例子吗？
那么您是在尝试移动默认原点吗？
移动原点或移动所有对象对我来说都没有关系，只要一切都可见。当然，第一种情况似乎更容易一些。我的问题是，计算实际班次然后将其应用到我想要绘制的所有元素上有点过于繁琐了。那么，有什么方法可以改变原点吗？
在我看来，如果 Python 具有边界框功能，您将使用它来缩放/大小和定位您的 svg

标签： python image svg

【解决方案1】：

假设您想移动原点，您需要做的是用组元素围绕您的图形线并对其应用变换。

我不知道该库的正确语法，但根据文档，它将类似于以下内容：

im = svgwrite.drawing.Drawing()
g = svgwrite.container.Group(transform='translate(50,50)')
im.add(g)
g.add(im.line( start = (-10,-10),\
                end   = (20,20),\
                stroke= 'black'))
im.saveas('example.svg')

【讨论】：

谢谢，但我不能说我喜欢这个解决方案。图片的大小（宽度/高度）对我很重要，我希望它最小。您添加的常数 50 很容易猜到，但由于图纸变得更加复杂，您不能这么容易地分辨出来。在这种情况下，最小常数将是 10*sqrt(2)。我添加了另一个示例。对于不完整的问题，我很抱歉。
在我看来，如果 Python 具有边界框功能，您将使用它来缩放/大小和定位您的 svg。

【解决方案2】：

如果我理解您的说明正确，您想要的是图表在呈现时不会离开页面（？）。如果是这种情况，您需要在 SVG 中添加 viewBox。

首先，跟踪整个图表中的最小值和最大值以及 x 和 y 值。您可能必须自己做，或者 svgwrite 库可能会为您做。

图表完成后，将viewBox 属性添加到包含这些值的根 SVG 元素。

viewBox 采用这种形式：

minX minY width height

其中 minX minY 是图表的左上角。因此，对于上面的第一个示例，viewBox 将是：

<svg viewBox="-10 -10 30 30" ... >

对于您的第二个示例，它将是：

<svg viewBox="10 10 10 10" ... >

然后当图片在浏览器中渲染时，它将使用 viewBox 属性给定的图片尺寸来定位和缩放内容以填充容器（浏览器窗口，<div> 等）。

如果您想为图表指定默认宽度和高度（例如 200 像素 x 200 像素），而不是让它填充容器，请向 SVG 添加 width 和 height 属性。像这样：

<svg width="200px" height="200px" viewBox="-10 -10 30 30">

    <line x1="-10" y1="-10" x2="20" y2="20" stroke="black" />

</svg>

Demo here

【讨论】：