Question

我正在使用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只有部分＆＃34;肯定＆＃34;部分是从[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 | （相应地| y_min |）到所有对象的所有x（相应的y）坐标。其中| a |代表
如果坐标x_min（resp.y_min）为正，则从所有对象的所有x（相对于y）坐标减去x_min（resp.y_min）

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

注意当我遇到此问题时，module Image会出现类似的问题。

Answer 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')

Answer 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>等）。

如果您想要为图表指定默认宽度和高度（例如，200px x 200px），而不是让它填充容器，请向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

将SVG对象移向原点

2 个答案: