草庐IT

mermaid-svg-Rc

全部标签

javascript - 处理嵌入式 SVG 脚本标签中的字符引用

这是一个xss脚本:alert(1)之间的代码标签将被翻译成alert(1)由浏览器执行。但如果我不使用标记代码不会被翻译成脚本。谁能告诉我为什么会这样?如何标记工作? 最佳答案 characterreferences的使用根据HTML5规范,HTML解析器明确不允许在脚本标记内使用。HTML5有一个separatescriptparsingmode作为随上下文变化的多种标记化模式之一。脚本解析不允许字符引用,其他一些解析模式允许。SVG基于XML,其中

javascript - html 中的内联 svg - 如何优雅地降级?

请参阅下面的代码-我正在尝试在我的网站中包含内联svg。我正在关注aneatsuggestion使用svgswitch元素,以便它在旧浏览器上优雅地降级。这个想法是支持svg的浏览器使用switchblock中的第一个元素;那些不忽略所有svg标签并且只显示隐藏在开关block的第二个元素(即foreignobject标签)中的img。它工作得非常好......除了我的svg(乐谱)必须包含文本元素并且它们会被旧浏览器渲染(以及外来对象)。具有讽刺意味的是,在IE8和更低版本中使用条件注释很容易处理这个问题。对于其他较旧的浏览器,我在foreignobject中有一个javascrip

html - SVG 图像知道它们的纵横比;为什么浏览器不尊重它?

在HTML5文档中链接或内嵌的SVG图像是一种相对较新的做法(按照Web标准),但我相信它迅速成熟很重要。现代浏览器应该如何调整任何一种类型的svg图像的大小,这些图像仅说明它们的纵横比(根据它们的viewBox),以及父HTML文档只给出宽度或高度中的一个(但不是两个)?为了有效地缩小话题范围,这个问题只涉及HTML5文档。我做了一个testpage这在几个不同的HTML上下文中显示了这一点,并且只有Firefox的行为方式符合我的预期(并且更喜欢),在所有测试的情况下从两者中推断出一个。在早期的测试中,Chrome曾经也是如此,但现在不会了。Opera非常接近。这个问题的背景和背景

javascript - SVG 元素的 D3 多行工具提示

我正在尝试添加多行工具提示,但遇到了一些问题,主要是InternetExplorer处理它们的方式。我实际上可以让我的html看起来正确呈现,但IE忽略工具提示中的换行符并将它们全部放在同一行。这是我尝试过的一些片段(不是确切的代码,我的开发站是在一个封闭的网络上,所以请忽略遗漏的不相关信息,如位置等)varbars=svg.selectAll(".bar").data(data).enter().append("rect").attr("class","bar").append("title").text(function(d){return"LineOneX:"+d.x+"\nLi

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