问题标签 [svg-path]

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 回答
449 浏览

svg - SVG点路径相对于点而不是绝对

我的数据分为两部分:

  1. 位置 x,y
  2. 点 px1,py1 px2,py2 .... pxn,pyn

我正在根据这些数据构建 SVG,但我希望这些点与位置相关,例如未处理的点如下

但是对象左上角的位置应该是 100,100,所以点应该都加 100。

现在,我当然可以在处理数据以生成 SVG 的代码中执行此操作,但是有没有一种简单的方法可以在点上添加偏移或偏差?

我尝试了以下方法(添加了 x= 和 y=),但对 SVG 的查看没有影响:

0 投票
1 回答
513 浏览

svg - 拆分巨大的 svg 文本路径

我在 svg 上有非常非常大的文本路径。但是这条路径是一个词,我怎么能把这个词分成单独的字母?例如:

0 投票
1 回答
1406 浏览

javascript - Vivus JS 似乎没有动画节点

我正在使用 Vivus JS 库,它非常适合绘制图片等动画路径。现在,我有这个 SVG 图标,它应该以 100% 的线宽进行动画处理,但它似乎不起作用。在我项目中的其他图标上效果很好。

看这个CodePen:http ://codepen.io/anon/pen/yOqdbN总结如下

有谁知道为什么会这样?非常感谢您为我指明正确方向的任何帮助。

0 投票
1 回答
925 浏览

svg - 如何在 svg 路径标签上显示引导弹出框

我有一个 svg 文件和多个路径,我想要在 svg 文件中的路径标记上悬停后引导弹出窗口,但我不知道如何在 svg 路径标记上使用引导弹出窗口。

0 投票
1 回答
228 浏览

javascript - Canvas + svg 路径动画,在路径中的特定点暂停一段时间并恢复

我有一个带有星形的画布沿着 svg 路径(弯曲)移动。

我想在路径中的任何点暂停星星一段时间并恢复。

我使用了以下代码:http: //jsfiddle.net/ARTsinn/8LruM/

我在这里先向您的帮助表示感谢...

0 投票
1 回答
1671 浏览

javascript - 带有 onclick 的 SVG 绘制路径

我是 javascript 新手,我尝试用 mouseevents 绘制路径。我遇到了两个大问题:

我想通过 4 鼠标单击来创建路径。但我不明白为什么我的路径看起来很奇怪。为什么它看起来不像我的鼠标事件的点。如何创建看起来像我的鼠标事件的路径?

我这样尝试:

我有第二个问题。如何将 CSS 集成到我的 javscript 创建路径中?因为我想让路径可拖动。像这样:

0 投票
1 回答
71 浏览

javascript - 如何使用 CSS 或 JavaScript 为 SVG 路径设置动画或过渡?

我在 Adob​​e Illustrator 中创建了一个 SVG 图像,其中包含以下代码:

我想要实现的是当我将鼠标悬停在SVG. 到目前为止,我已经尝试了以下方法:

  1. transform: translate(0, 10px);

  2. position: relative;bottom: 10px;

  3. margin-bottom: 10px;

  4. padding-bottom: 10px;

不幸的是,以上都没有奏效,我现在很好奇为什么svg元素需要这种特殊处理并且不像其他“正常” HTML 元素那样工作。

我知道可以使用animatetransform. 但它似乎也不适用于我的路径。

为了向上移动最上面的点,我必须更改什么属性?

0 投票
1 回答
585 浏览

javascript - D3:如何以编程方式调整 SVG 图像路径元素?

使用图标作为数据点

受到使用 svg 图像作为数据元素的能力的启发,正如本块演示的那样,我想更进一步并使用 SVG 图像(SVG 路径),这样我还可以调整它们的笔触颜色和粗细。

这是我上面链接的块的屏幕截图:

在此处输入图像描述


使用 SVG 路径作为图标

该代码使用图像,而不是 SVG 路径。我模仿了代码,将我的等价物指向.attr("xlink:href", "https://github.com/favicon.ico")svg 图像。例如,.attr("xlink:href", "../images/my_logo.svg"),其中my_logo.svg是一个图标,类似于上面示例中显示的内容,但具有有效的 svg 元素。例如,my_logo.svg元素开始是这样的:

. . .

. . .


将这些 SVG 路径文件合并到 D3 环境中

但是,我错误地阅读了这个 SVG,因此它被视为图像。我正在复制上面提到的块中的示例,它执行以下操作:

具体来说,就我而言,我正在尝试制作散点图,因此我的代码如下所示:

这显然将 SVG 作为“图像”引入,这不允许我调整笔画宽度或颜色或我希望调整的这些东西。例如,如果我查看控制台中的元素,使用d3.selectAll("image"),我会看到我可以访问xywidthheight等,就像我使用普通图像一样,而不是真正灵活的 SVG 路径元素。

我知道问题是因为我将此图标作为图像导入,但我只是不知道正确的方法。

0 投票
2 回答
1332 浏览

svg - 我可以在不使用 az 参数的情况下关闭 SVG 路径吗?

我可以只完成我开始它的路径,它会被认为是关闭的还是Z必须使用命令?

例如,这是

和这个一样

还是在第一个和第二个示例中同一点 (150, 0) 上是否有两个点?

0 投票
0 回答
39 浏览

html - 修改生成的 svg 路径的工具

我有这个JSfiddle

这基本上是一个带有动画的 SVG。正如在文本中看到的那样,它说“介绍加拿大原油指数 ETF”。我想将其更改为“介绍加拿大石油和天然气 ETF”。

显然,我可以在d每个字母的标签中使用数字来更改它,但这似乎是浪费时间。有没有快速的方法来做到这一点?任何可以生成类似 svg 的工具或可以获取此 svg 并让我能够修改它然后再次生成它的工具?