问题标签 [jquery-svg]

我在 HTML 中创建了一个 SVG 画布内联，动态使用 keith-wood jquery 插件。

我使用了 SVG 元素中的 viewBox 属性来缩放 SVG 画布的内容。

在 SVG 画布内，我绘制了一个矩形，带有重复的图案（瓷砖），每个 1x1 单位。

800x800 板：

当用户将鼠标悬停在 SVG 内的一个元素上时，我想将鼠标事件的 pageX 和 pageY 像素坐标转换为图块的坐标，给定 viewBox 缩放。因此，如果用户将鼠标悬停在第一个图块上，我希望返回 {x: 0, y: 0}，给定 e.pageX 和 e.pageY 其中 e 是 mousemove jquery 事件对象。

我该如何计算？

谢谢

我从 kendoui 演示中修改了以下代码

http://jsbin.com/alupin/6/

我试图在鼠标悬停时缩放气泡的大小，并在鼠标移出时恢复到原始大小，但是我得到了圆圈边界的痕迹。

我正在使用 kendoui 绘制图表并使用 jquery svg 为 svg 元素设置动画。

谢谢你的帮助。

请帮我！我用inkscape创建了一些形状并将其保存为SVG，我创建的路径我给了它们ID。现在我已经将SVG文件与我的html链接起来，我知道想用jQuery访问这些路径（id = path123）和开始使用 jQuery 进行编辑和操作。

我的职责是当我将鼠标悬停在其中一条路径上时，它会显示带有一些信息的工具提示。

我试着放一个

PS。我用谷歌搜索并找到了其他使用 jquery 编辑 svg 的示例，但无法找到如何使用从 inkscape 创建的这个文件。

这是我用inkscape创建的svg文件代码

谢谢阿尼

下面的代码在 IE 中运行良好。但箭头标记在 chrome 中向左定向。

确切的问题是什么。请问，谁能告诉我。?

这是相应的 jsfiddle。

我正在尝试更改灰色区域的宽度并根据从 1 到 100 的某个值移动圆形图层。

我将 D3.js 与 SVG 图像一起使用。下面是 svg 图像的代码，但我无法更改宽度，因为路径标签没有任何直接属性可以做到这一点。

我看过：http: //jvectormap.com/

我想自己做一些类似的事情，基本上是一张具有不同区域（用于时区）的世界地图，当鼠标悬停时，它可能会变灰，并且显然带有相关的值。

但是，我对如何做到这一点完全感到困惑。

我听说过 SVG 并尝试了一两件事，但如果有人能指出我正确的方向，我很乐意提供帮助。

通常我不会问这么平凡的问题，但我真的很困惑。

我在使用 jquery 突出显示地图中的状态时遇到问题。我已经使用 javascript 实现了它。` SVG Illustrator 测试

`

通过此代码状态可以轻松突出显示，但我想在 jquery 中执行此操作，因为我还想添加工具提示，以便在鼠标悬停时也显示状态名称。所以基本上我想知道如何使用 SVG 的 id 或类或标签来通过使用 jquery 来执行不同的操作。

我有这个代码：

如何动态获取drawSvg中的svgCanvasHeight，以便在调整窗口大小时，svg的viewBox和svg也是如此？

我有一个圆，里面有一个边界环（绿色和静态），还有一些“脉冲”外圆（蓝色）。我将如何解决这个问题，只让静态圆圈内的“脉冲圆圈”部分可见？

我还包括了用于呈现 HTML 的 JS 供您参考，但它不会在 JSFiddle 中生成 SVG。

我认为 SVG 中存在图层，但考虑到我如何构建其他圆圈的渲染，这并不是很有帮助。 快速回顾一下它的工作方式。

1. 用橙色渐变绘制背景圆，并在其上放置同心圆。
2. 画出绿色的静态圆圈。
3. 将四个脉冲放在笛卡尔平面的基点上。
4. 动画脉冲。

我知道我可以在主圆圈的边界内测量一次点击，所以我希望我可以将脉冲的动画（可能是一种 hacky 方式）限制在绿色圆圈内。

也许放在顶部的其他圆圈具有反向填充或其他东西？只是吐出想法，因为我已经尝试了我所知道的一切并且找不到任何其他示例或想法研究。

可能会帮助您帮助我想到实现此目的的方法的相关文章：

如何计算（圆的）弧的 SVG 路径

I have two images(png) and two video (mp4). Need to make slideshow in next sequence:

• play video #1;
• show image and show some text with fade effect on bottom of image;
• show another image with some movement and zoom to center effect;
• play video #2;

Need to use SVG only. I mean just run example.svg and it should play slideshow above.

Thanks in advance