问题标签 [svg-edit]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
10024 浏览

javascript - 如何将变换矩阵应用于 Raphael JS 2 中的路径坐标?

我想在 Raphael JS 2 中应用或“烘焙”多条路径的转换,以便我可以将它们组合成一条路径。

这是一个示例路径,我希望将“transform”属性应用于所有“d”坐标。

我了解 svg-edit 框架可以将路径坐标转换为绝对位置,并在此过程中移除变换矩阵。

一些相关的问题,我无法从中得到答案:

0 投票
1 回答
306 浏览

javascript - 上传到 svg-edit 时,光栅图像意外调整大小

这是一个非常特定于项目的问题,与我的svg-edit实现有关。

我已经实现了更新的“ext-server_opensave.js”(来自这个问题),以便用户能够从他们的文件系统上传光栅图像。

我在“ext-server_opensave.js”中遇到问题的代码片段如下:

在那里设置宽度和高度属性时不起作用,其他属性起作用。这是一个奇怪的错误 - 第一个图像上传会以原始大小上传文件,然后每个后续图像上传都会调整为 48x48。如果我在上面粘贴的那个方法中设置宽度和高度值,我会在一瞬间看到这些尺寸的图像,然后它会重新调整为 48x48。基本上,在 和 之后调整图像大小的链条中有一些处理程序/方法svgCanvas.addSvgElementFromJsonsvgCanvas.addToSelection经过数小时的 javascript 调试后,我无法弄清楚在哪里。

0 投票
1 回答
46280 浏览

javascript - 更改 SVG 路径的宽度/高度

如何更改SVG-edit中选定路径的宽度/高度

  • 到目前为止,我只有这个:

    svgCanvas.changeSelectedAttribute("height", "499");

上面的命令对路径绝对没有影响。调整边界框的大小只是调整边界框的大小,而不是路径本身。

0 投票
1 回答
316 浏览

javascript - 在 svg-editor 中转换路径,使用用户输入值绘制方法

我想知道是否可以在用户绘制路径后使用用户输入的值来调整路径的大小。例如设置宽度和高度。

我目前正在使用 JS 函数中的 transform 属性来做到这一点,但是当路径被调整大小时,路径的句柄保持在原始位置,这使得事情变得一团糟。

有任何想法吗?

0 投票
4 回答
11494 浏览

javascript - 获取选定 SVG 元素的边界框

我想阅读:

  • width, height, x,y测量

对于特定的 SVG 元素。


我想最简单的方法是先获取最小边界框并读取它的属性。

我怎样才能访问这个?

0 投票
1 回答
430 浏览

javascript - 在 svg-canvas 中定位转换后的 SVG 元素

我编写了一个函数,可以调整 SVG 路径或任何形状的大小。但是,当我使用它时,路径确实会调整大小,但不幸的是它也会改变我的 svg-canvas 中的位置。

这是我的功能

我只希望形状在变形后定位在画布的顶角。理想情况下,我希望它们具有与转换之前相同的 x,y 位置,但是如果原始 x,y 位置难以实现,我不介意有一个固定点。

0 投票
1 回答
1856 浏览

base64 - 如何使用嵌入式 API 在 svg-edit 中导入图像/光栅

我使用核心api确定方法“svgCanvas.importImage(url)可以导入base64编码的图像。

但是嵌入式 API 并没有公开这个私有的方法。看来我也不能使用该方法使用的任何方法(svgFromgJson 等)。

有没有人对我如何在嵌入式 svg-edit 启动时加载代表图像的 base 64 字符串有建议?我正在考虑将该字符串包装在模拟 svg 文件中的 < image> 标记中并以这种方式导入..

SVG 是否支持嵌入位图图像?

0 投票
1 回答
3930 浏览

javascript - 如何剪掉 viewBox 之外的内容?

有没有一种功能或方法可以剪辑视图框之外的路径,而不是仅仅隐藏它?

我正在使用 svg-edit 它有一个视图框,一个画布区域。在画布之外绘制的所有内容都是隐藏的。但是,当编辑器的输出被收集并粘贴到 Inkscape 等图形编辑器中时,整个绘图就会出现。我希望从编辑器的输出中完全剪掉视图框外的绘图。因此,例如,如果我有一个在画布外一半的圆圈,那么编辑器的输出将是半个圆圈,而不是整个圆圈,只是隐藏了一半。

我想改变主题路径本身的几何形状,而不仅仅是将其隐藏起来。

我正在修改 svg-edit:http ://code.google.com/p/svg-edit/

0 投票
1 回答
510 浏览

svg - 将 Poilu raphael 布尔运算(联合、减法)与 SVG 编辑集成

我正在修改 svg-edit,更具体地说是 Mark McKays Method draw:https ://github.com/duopixel/Method-Draw 。

我想使用我发现的这个 Raphael 库:https ://github.com/poilu/raphael-boolean ,它允许我对画布内的路径执行布尔(设置)操作。

现在我已经在编辑器中实现了一个按钮来启动一个功能:

好的,单击按钮后,编辑器不应该返回带有椭圆的联合(焊接)路径吗?

还是我弄错了?

我认为var paper = Raphael("canvas", 250, 250); 必须改变一些东西。行,因为 svg-edit 为画布使用了不同的名称,但我不知道该怎么做。

任何帮助将不胜感激,因为我已经为此苦苦挣扎了一段时间。

更新:该库无法处理多对象焊接、自相交和许多其他情况。只有当我们想对 2 个简单对象执行操作时,它才有效。这可能不会立即与手头的问题相关,但我认为无论如何提及它是明智的。

如果您正在寻找 SVG 元素上的布尔运算,请参阅此问题:SVG 路径上的布尔运算

0 投票
1 回答
337 浏览

javascript - 在 SVG-edit 中集成 Raphael 库。兼容性问题?

是否可以在 SVG-edit 中使用像这样的 Raphael 库:https ://github.com/poilu/raphael-boolean ,它使用纯 SVG?:

SVG 编辑网站:https ://code.google.com/p/svg-edit/

我曾尝试将他们俩结婚,但我猜他们不会返回相同的路径字符串,以便我可以以干净的方式使用 raphael 库。它们是否兼容?