草庐IT

svg-edit

全部标签

javascript - 处理重叠 SVG 图层中的鼠标事件

我正在使用d3.js构建map可视化。我正在为美国各州和县绘制填充的多边形。县的SVG层位于州的层之下。状态已填充,但fill-opacity设置为0;填充是必需的(我认为)以捕获点击事件。我想捕捉州级的点击事件,但我想捕捉县级的鼠标悬停事件。但是,鼠标悬停事件由各州捕获,不会传递给各县。有什么方法可以将事件向下传递一层或以其他方式触发县上的鼠标悬停事件吗? 最佳答案 这是一个d3函数,可以执行您想要的操作。它通过暂时禁用顶层的指针事件,并手动触发下一层的鼠标事件,将事件传递给下层。functionpassThruEvents(g)

javascript - 更改 svg 填充颜色,然后绘制到 Canvas

我想要做的是加载一个svg,将其填充颜色更改为随机值,然后将其绘制在Canvas上。事实证明,这比我想象的要困难得多。这是我目前的代码。varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");//imagesvarbottomLeftTop=newImage();varbottomRightTop=newImage();varfullTop=newImage();varleftMidSide=newImage();varleftSide=newImage();varrightMidSi

javascript - 与 .svg 图像交互

我有一张.svg格式的图片,如下所示。我想制作一个网页,用户可以在其中与这样的图像进行交互,但节点更多。该结构将类似于一棵树。是否可以使用javascript/html/css直接与此.svg图像交互?如果是,怎么做?注意:我所说的交互是指能够点击节点-网页识别它-当一个节点被选中时,其他节点的颜色会发生变化。注意2:我只有.svg文件,我不知道我是否能够将其定义为html上的内联svg。注意3:这张图片将有很多节点(80+),所以我宁愿不必为每个节点定义一个可点击区域等等......但如果这是唯一的解决方案,没问题。编辑:这是我的.svg文件的内容:gaabba->bc

html - 如何在缩放的 SVG 中将屏幕坐标转换为文档空间?

我使用的是KeithWood的svgjquery插件,而不是HTML5Canvas。我这样定义我的svg图像以缩放我的svg三角形图像以适合它的div容器:但是我该如何匹配坐标系呢?我想在三角形上的某个点捕获鼠标位置并在这些XY坐标处绘制一个圆,但是由于坐标系不匹配,圆被绘制在不同的位置。因此,一个圆会在点10,10处绘制,但例如看起来在50,60处。人们如何应对这种情况?谢谢。最终解决方案:使用JQuery插件画圆,getScreenCTM()计算点数。也许我不再需要JQuery插件,但现在就可以了。看不到如何仅使用插件来做到这一点。$('#cvtriangle.tri').on("

html - 更改 SVG 形状的粗细

我对svg绘图还不够熟悉。我有这个SVG格式的箭头。如何增加箭头的粗细?提前致谢 最佳答案 您可以使用stroke="black"stroke-width="10"添加一个笔划,然后相应地调整您的viewBox。OLD:NEW: 关于html-更改SVG形状的粗细,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/37687427/

html - 使用 CSS 动画调整 SVG 圆半径

我正在尝试使用CSS为SVG圆的半径属性设置动画。虽然(使用FirefoxInspectElement工具)我可以看到动画本身已正确设置和运行,但“.innerCircle”的大小没有明显变化。如果您能发现我明显遗漏的任何内容,或以任何方式提供帮助,我将不胜感激。我对此很陌生,所以如果我做错了,请多多包涵!我已将我的文件粘贴在下面以供引用。再次感谢。@keyframesbuttonTransition{from{r:5%;}to{r:25%;}}.innerCircle{animation-duration:1s;animation-iteration-count:infinite;a

HTML5 内联 SVG 自动裁剪空白

我有一个SVG图(有点复杂),它是使用php和数据库中的一些数据生成的。在那种情况下,我无法预测svg和任何东西上标签的长度。图表是即时生成的,数据总是未知的。这就是为什么,我从这个开始:我正在设置巨大的View框(1000,1000),然后我开始在该View框中间的某处生成SVG。在那之后,一些元素有时靠近左边,另一个靠近顶部,例如在底部我有200个空白矩形。是否有任何选项可以自动裁剪SVG中的空白以匹配内容?我有一种直觉,我的想法不好,我遗漏了一些东西或做错了一些事情。假设这可以作为最终产品的示例(版权维基百科):http://upload.wikimedia.org/wikipe

html - svg 中的自定义字体

我想在嵌入网页的svg中使用自定义字体。使用setattribute我可以使用Arial...字体。我认为那些字体嵌入在浏览器中,我可以使用它。但是我该怎么做才能使用自定义字体呢?在Firefox中,当我在css中使用例如@font-face....@font-face{font-family:"ITCGothicBold";src:url('fonts/ITCGothicBold.ttf')format("truetype");}该字体系列适用于Html网页。另一方面,例如,在svg文本中:HELLO例如,我想使用ITCGothicBold.ttf。使用setattribute我可以

html - 我可以包含外部 SVG defs

我创建了以下SVG图标:当包含在内联时,我可以使用重用图标标签如下:问:是否可以将defs作为外部文件包含在内? 最佳答案 如果您想通过use包含外部SVG元素,只需指定正确的IRI。在xlink:href属性中。如果你使用像#something这样的IRI,你指的是同一文档中的一个元素,它有something作为id,如果你需要得到来自不同文档的外部元素,您可以使用类似external.svg#someotherthing的东西,这样IRI会指示存在idsomeotherthing的元素在名为external.svg的文件中。

html - 滚动时保持 SVG 对象静态

在我的网络应用程序中,我生成了一个SVG文件,其中包含一个“标题”,当用户向下滚动图像时,我希望它在窗口顶部保持可见。我可以想到两种方法来实现这一目标,但我正在寻找任何其他好的想法。我的两个想法是:生成两个单独的SVG,一个是“标题”,一个是内容,然后简单地以两种不同的HTML显示它们元素,允许下面的元素滚动。我不喜欢这个想法,因为我必须生成两个单独的文档。在SVG本身中使用ECMAScript并找到一种方法来float包含页面顶部的标题。我喜欢这个,因为无论何时查看SVG,它都应该可以工作,但我不确定如何实现这一点,如果有任何指示或示例,我将不胜感激。 最