问题标签 [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.

0 投票
1 回答
517 浏览

javascript - Recolorable SVG icons in a web page?

I'm writing a quite complicated, big and long living (it might display for many days) web page that will also need icons. These icons are supposed to be SVG graphics. Depending on the place on the page the SVG should be recolored by JavaScript calls (jQuery or even jQuery-SVG is fine).

So my questions are:

  • What's the best way to include the SVG in the web page?
    • <img>
    • <object>
    • jQuery(...).svg({loadUrl:...})
    • ...
  • How to "multiply" them?
    • Pre-load in a hidden <div> and clone()?
    • Just load on demand?
  • What's the best way to setup the SVG? (All icons in one file on different layers? All icons in one file separated by place? One file per icon?)
  • What's the best way to recolor the icons then? (Think of quite abstract icons consisting out of a line graphic where that line should get a different color)

Required browsers are the usual compliant modern ones (Firefox, Chrome, Opera, Safari) for normal PC as well as mobile (Android, iOS). Internet Explorer compatability is not required.

0 投票
1 回答
2550 浏览

javascript - 分配 SVG 根元素的 currentScale 时出错

我对 SVG 和 JavaScript 有疑问:

此代码按预期运行:

但是当我尝试像这样重新分配 currentScale 参数时:

我得到错误

并且不执行警报。我对 SVGRoot.currentScale 的分配有什么问题?

更新:

使用时错误消失

或者

但 currentScale 的实际值不会改变。无论传递给 setAttribute 什么,它都保持为 1。

0 投票
0 回答
983 浏览

jquery - 使 SVG 对象在 jQuery 中可放置

我的 Web 应用程序中有一个 SVG 线(路径)对象,并且 div 是可拖动的。

我想将“可拖动” div 拖到 svg 对象中。为此,我必须将 SVG 线(路径)设为可放置。使用以下代码,我可以将 html 内容设置为可拖动/可放置。

但请帮助如何使 svg 可拖动或可放置,以便我可以拖放到 svg 路径

谢谢

0 投票
1 回答
1543 浏览

javascript - 使用 jQuery 正确更改 SVG 线坐标

我正在尝试更改 SVG 线的 Y 坐标之一,我正在使用 jQuery 和 SVG 插件 + 动画插件。我之前一直在为线条制作动画,但这里的功能需要简单地改变位置,

这行得通;

这没有;

我可以看到我不应该在这里使用动画,但我不知道为什么 attr 或 css 在这种情况下不起作用?我认为问题在于 svgY1 可能不是识别该坐标的正确方法,但我被卡住了。

此时所有相关元素都是静态的,我很确定这不是来自另一个功能的干扰。

0 投票
1 回答
259 浏览

svg - svg 路径悬停在单击之前不起作用 - 其他工作正常

当我将鼠标移到“单元格”上时,所有这些单元格都可以在页面加载时工作,但需要先单击一个。由于所有路径都是以相同的方式创建的,并且所讨论的路径不是第一个也不是最后一个生成的,我不知道是什么原因。

我的项目

有问题的路径是'Co。多尼戈尔”。这是顶部左侧的那个。在页面加载时,qtip 正确显示,但在单击之前不会出现淡入。这不是其他路径的情况。

任何的想法?蒂亚。

0 投票
1 回答
719 浏览

html - SVG onload 事件调用太早?

我有这样的代码,使用 jQuery-svg

事件处理程序 ,bind在 jQuery-svg-dom 能够选择 SVG 数据中的元素之前被触发。我的代码应该查看 SVG 并分配各种类并将侦听器附加到各种元素,但它无法找到任何元素。如果我bind在加载所有内容后调用控制台,它可以找到所有 SVG 元素。

难道我做错了什么?是否有另一种方法可以检测 SVG DOM 何时可用?我曾想过使用计时器,但这真的很麻烦,特别是考虑到我的 SVG 文件可能有几 MB 大。

0 投票
2 回答
16994 浏览

jquery - 如何将文本放置在 svg 路径的中心

为了渲染 SVG,我使用了 jQuery SVG 插件。而且,现在我想为每个路径和多边形添加文本。在jsFiddle 上,您可以看到插件生成的标记。

为了创建文本,我编写了以下代码:

jsFiddle上的代码中,您可以看到textpath标签存在,但不可见。如何在每条路径的中心添加文本?
谢谢。

0 投票
1 回答
1601 浏览

javascript - 无法更改三个容器中的 SVG 矩形属性

经过几次尝试和代码更改,我无法在 SVG 内制作矩形来改变他的位置 - 甚至不要求动画。显然是使用jQuery SVG 插件加上动画扩展。

问题:一个 SVG 包裹在三个内部<div>,一个内部 y 有一个矩形,需要在y:0文档加载后位于。这是代码:

好吧,矩形没有任何反应,它保持原始坐标。Chrome 控制台也没有说什么。

补充:有问题的HTML

我愿意为此使用<canvas>,但我不知道结果如何。

0 投票
1 回答
790 浏览

javascript - 带有 jQ​​uery 的 SVG 元素中的 HTML5 Canvas

我需要将画布插入 SVG 元素。我需要 SVG 中的画布,因为我正在使用 d3js,它使用 SVG 和 jquery 迷你图来创建画布。有没有办法让迷你图成为 svg 元素的一部分?我试图在 SVG 中绘制带有迷你图的图形,但返回的 c.innerHTML 未定义。

谢谢!

0 投票
2 回答
8254 浏览

javascript - SVG foreignObject 未在 Chrome 中显示

我有一个包含 div 的 foreignObject 的 SVG 元素。然后在我的js中我这样做:

它在 div 中创建了一个画布。当我查看两个浏览器的 firebug html 代码时:

火狐:

铬合金:

在 chrome 中它甚至不显示 div。我创建 div 的方式是

Firefox 正在按照我的预期工作。但铬没有。有没有人有什么建议?

另外,我认为部分问题是 chrome firebug HTML 输出显示“foreignobject”,但 Firefox 以我附加的方式显示“foreignObject”。