问题标签 [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.
svg - SVG点路径相对于点而不是绝对
我的数据分为两部分:
- 位置 x,y
- 点 px1,py1 px2,py2 .... pxn,pyn
我正在根据这些数据构建 SVG,但我希望这些点与位置相关,例如未处理的点如下
但是对象左上角的位置应该是 100,100,所以点应该都加 100。
现在,我当然可以在处理数据以生成 SVG 的代码中执行此操作,但是有没有一种简单的方法可以在点上添加偏移或偏差?
我尝试了以下方法(添加了 x= 和 y=),但对 SVG 的查看没有影响:
svg - 拆分巨大的 svg 文本路径
我在 svg 上有非常非常大的文本路径。但是这条路径是一个词,我怎么能把这个词分成单独的字母?例如:
javascript - Vivus JS 似乎没有动画节点
我正在使用 Vivus JS 库,它非常适合绘制图片等动画路径。现在,我有这个 SVG 图标,它应该以 100% 的线宽进行动画处理,但它似乎不起作用。在我项目中的其他图标上效果很好。
看这个CodePen:http ://codepen.io/anon/pen/yOqdbN总结如下
有谁知道为什么会这样?非常感谢您为我指明正确方向的任何帮助。
svg - 如何在 svg 路径标签上显示引导弹出框
我有一个 svg 文件和多个路径,我想要在 svg 文件中的路径标记上悬停后引导弹出窗口,但我不知道如何在 svg 路径标记上使用引导弹出窗口。
javascript - Canvas + svg 路径动画,在路径中的特定点暂停一段时间并恢复
我有一个带有星形的画布沿着 svg 路径(弯曲)移动。
我想在路径中的任何点暂停星星一段时间并恢复。
我使用了以下代码:http: //jsfiddle.net/ARTsinn/8LruM/
我在这里先向您的帮助表示感谢...
javascript - 带有 onclick 的 SVG 绘制路径
我是 javascript 新手,我尝试用 mouseevents 绘制路径。我遇到了两个大问题:
我想通过 4 鼠标单击来创建路径。但我不明白为什么我的路径看起来很奇怪。为什么它看起来不像我的鼠标事件的点。如何创建看起来像我的鼠标事件的路径?
我这样尝试:
我有第二个问题。如何将 CSS 集成到我的 javscript 创建路径中?因为我想让路径可拖动。像这样:
javascript - 如何使用 CSS 或 JavaScript 为 SVG 路径设置动画或过渡?
我在 Adobe Illustrator 中创建了一个 SVG 图像,其中包含以下代码:
我想要实现的是当我将鼠标悬停在SVG
. 到目前为止,我已经尝试了以下方法:
transform: translate(0, 10px);
position: relative;
和bottom: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
不幸的是,以上都没有奏效,我现在很好奇为什么svg
元素需要这种特殊处理并且不像其他“正常” HTML 元素那样工作。
我知道可以使用animatetransform
. 但它似乎也不适用于我的路径。
为了向上移动最上面的点,我必须更改什么属性?
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")
,我会看到我可以访问x
、y
、width
、height
等,就像我使用普通图像一样,而不是真正灵活的 SVG 路径元素。
我知道问题是因为我将此图标作为图像导入,但我只是不知道正确的方法。
svg - 我可以在不使用 az 参数的情况下关闭 SVG 路径吗?
我可以只完成我开始它的路径,它会被认为是关闭的还是Z
必须使用命令?
例如,这是
和这个一样
还是在第一个和第二个示例中同一点 (150, 0) 上是否有两个点?
html - 修改生成的 svg 路径的工具
我有这个JSfiddle。
这基本上是一个带有动画的 SVG。正如在文本中看到的那样,它说“介绍加拿大原油指数 ETF”。我想将其更改为“介绍加拿大石油和天然气 ETF”。
显然,我可以在d
每个字母的标签中使用数字来更改它,但这似乎是浪费时间。有没有快速的方法来做到这一点?任何可以生成类似 svg 的工具或可以获取此 svg 并让我能够修改它然后再次生成它的工具?