问题标签 [jquery-svg]
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.
javascript - svg 变换矩阵改变元素的笔画。如何防止这种情况?
我正在对 svg-edit 进行修改,并且我编写了一个函数,用户选择一个元素并单击一个按钮来触发一个要求新尺寸的函数,并且该元素被调整为调整后的尺寸。
然而有一个问题。当尺寸调整大小时,笔画宽度有时也会调整大小。线条显得更细。有什么办法可以防止这种情况发生吗?
这是我的功能:
javascript - 在不使用边界框的情况下获取 svg 路径的尺寸
有没有办法获取 svg 路径的尺寸并将其显示在 div 中?边界框不是一个选项,因为当涉及到贝塞尔曲线时,它在 Webkit 中是错误的。我正在修改 svg-edit 顺便说一句:https ://code.google.com/p/svg-edit/
这是我目前使用的。
不幸的是,边界框是不可靠的。除了bbox还有什么想法吗?
javascript - 使用 javascript 定位 SVG 元素
我正在对 svg-edit 进行修改。我正在使用一个函数来根据用户输入的宽度和高度来使路径元素变大或变小。用户选择一个元素并单击一个按钮以启动该功能,该功能采用最后已知的宽度和高度测量值,然后向用户询问新的宽度和高度值。然后它创建一个除数,它用于在元素上创建一个 TRANSFORM MATRIX 操作,以使其与用户想要的一样大。
问题是在变换矩阵时,元素也会改变位置。
我希望当用户被要求提供宽度和高度时,也被要求提供画布上的 x,y 位置,然后将所选元素移动到该位置。
他们是重新定位 svg 元素的一种方式吗?
svgCanvas.changeSelectedAttribute("transform", "matrix(" + newW + ", 0, 0, " + newH + ", 0, 0)"); svgCanvas.recalculateAllSelectedDimensions(); }
javascript - 使用javascript将重叠的svg路径焊接成一个路径
有没有办法使用javascript将2个重叠的svg路径焊接成一个统一的单一路径?
javascript - 如何剪掉 viewBox 之外的内容?
有没有一种功能或方法可以剪辑视图框之外的路径,而不是仅仅隐藏它?
我正在使用 svg-edit 它有一个视图框,一个画布区域。在画布之外绘制的所有内容都是隐藏的。但是,当编辑器的输出被收集并粘贴到 Inkscape 等图形编辑器中时,整个绘图就会出现。我希望从编辑器的输出中完全剪掉视图框外的绘图。因此,例如,如果我有一个在画布外一半的圆圈,那么编辑器的输出将是半个圆圈,而不是整个圆圈,只是隐藏了一半。
我想改变主题路径本身的几何形状,而不仅仅是将其隐藏起来。
我正在修改 svg-edit:http ://code.google.com/p/svg-edit/
jquery - 以原始大小在 jQuery SVG 中加载图像
我需要在 jQuery SVG 中加载一个图像,但要以它的原始大小。事实是它不知道正在加载的图像的原始大小是多少。
我们需要用来加载图像的代码是:
在这里我必须提供图像的大小。它是强制性的。但我不知道图像的实际大小,所以我应该怎么做才能让图像以原始大小和特定位置加载?
问候,
杨瑜珈
jquery - 在 jQuery SVG 中,为什么坐标不能按预期工作
我使用代码在 jQuery SVG 中加载两个图像:
加载图像后,它看起来像这样:
我将(瓶子的)图像旋转到 90 度:
现在,如果我尝试使用以下代码以交互方式向左或向右更多(瓶子)图像:
它向上或向下移动,而不是向左(向下移动)或向右(向上移动),如下所示:
为什么以及如何解决这个问题?
TIA
杨瑜珈
javascript - JQuery SVG:笔划线连接:圆形
我正在尝试使笔划线具有圆形连接。为什么下面的代码不起作用?
请参阅此 JSFiddle。
根据这个 OReilly 文档,我需要的样式属性和值是stroke-linejoin
and round
。并根据 JQuery-SVG 文档:
在 SVG 中包含破折号 (-) 的附加设置应以驼峰式书写,不带破折号
所以我不明白为什么它不起作用。
谢谢
更新:我在这里分叉了 JSFiddle,似乎在输出 SVG XML 时,它没有将驼峰式属性转换为带有破折号的属性。现在只是想弄清楚如何纠正它。它输出的 SVG XML 是:
jquery - Keith Wood JQuery SVG:clone() 后跟 change() 不起作用
在这个 JSFiddle中,(下面的代码),我只是试图克隆一个路径并更改它的设置。但是,当我运行代码时,它给出了 rect2 没有setAttribute()
定义方法的错误。
但是,相反,当我change()
在 rect1 上运行该方法时,它不会产生错误,就像在这个 JSFiddle中一样。所以我怀疑这是克隆方法的问题,因为它不会产生完整的克隆。
我究竟做错了什么?如果扩展有问题,有什么好的解决方法?谢谢
到目前为止我的努力:
- 如果我在克隆之前执行 alert(rect1),它会显示“[object SVGPathElement]”。
- 如果我在克隆后执行 alert(rect2) ,它还会显示“[object SVGPathElement].
- 如果我做 alert(rect1.setAttribute) 它说“function setAttribute() {[native code]}”
- 如果我做 alert(rect2.setAttribute) 它说“未定义”。
jquery - Keith Wood 的 Jquery SVG 插件:没有动画的变换?
使用 Keith Wood 的 SVG Jquery 插件,有没有办法在不使用动画功能的情况下移动/缩放/旋转路径?我想要一个即时的改变,我猜 animate 函数有不必要的开销。
我实际上在做的是创建一条路径,克隆它,然后旋转/移动它,然后重复。(例如,为时钟绘制多个刻度线)。
谢谢