草庐IT

mermaid-svg-Rc

全部标签

javascript - 带有 OrbitControls 的 SVGRenderer 在相对的两侧显示两个 SVG 元素

我创建了两个场景和两个渲染器,一个用于简单的3D网格球体,另一个用于svg圆。SVG场景位于网格场景之上,就像一个叠加层。球体和圆在3D空间中放置在同一位置。我使用OrbitControls环顾四周。当程序加载时,我在同一个地方看到球体和圆,但是当我环顾四周时,我在另一侧看到另一个svg球体。为什么我在3D空间中看到两个svg图标以及如何去掉第二个图标?我确定它是一个svg节点,而不是两个,但轨道控件以某种方式在后面看到它就像在镜子中一样。这是演示链接:http://mystic-peanut.com/mystic_sites/svgdouble/svg_sandbox.html这是代

javascript - SVG 标记在不同屏幕上呈现不同

更新:我解决了屏幕问题。设备像素比是罪魁祸首。在具有较低window.devicePixelRatio的设备上,图标显示得较小,一个解决方案是使图标的大小以window.devicePixelRatio为条件,即:scaledSize:highDevicePixelRatio?newgoogle.maps.Size(40,60):newgoogle.maps.Size(60,90)分辨率也可能起到一定作用,但我目前无法测试。不过,InternetExplorer11的问题仍然存在。**结束更新**所以这真的很荒谬,我还是有些莫名其妙。我注意到我的自定义标记的这种极其不一致的行为。把我逼

javascript - SVG foreignObject 元素的 dagre-d3 IE 解决方法?

我是本科生合作社,目前正在为我的团队开发一个网页项目。一开始,我选择使用dagre-d3库来构建图形,它们在Chrome上运行良好。然后我意识到SVG中的ForeignObject元素在IE上不起作用(IE恰好是支持的主要浏览器)。由于我的目标本质上是在每个图形组件中填充HTML内容,我想知道是否有任何解决方法可以在仍然使用dagre-d3的IE上实现它。或者对不同的图形库有什么建议吗?更新:基本上我想创建如下截图所示的图表:下面是我现在使用dagre-d3构建图形的代码:HTML片段:JS片段:varg=newdagreD3.Digraph();//Constructnodesfor

javascript - 带有动态添加元素的 SVG 动画

基于this代码,我正在尝试为动态生成的SVG元素设置动画:varsvgnode=document.createElementNS('http://www.w3.org/2000/svg','svg');varcircle=document.createElementNS('http://www.w3.org/2000/svg','circle');circle.setAttribute("cx","10");circle.setAttribute("cy","10");circle.setAttribute("r","10");circle.setAttribute("fill","

javascript - 用 Raphael.js 听右键单击 svg 元素

当用户右键单击使用Rapahel.js创建的元素时,我需要做出响应。我读到你应该只附加一个点击事件处理程序,然后决定用户点击了哪个鼠标按钮。我无法让它工作。window.onload=function(){varr=Raphael('demo',640,480);r.rect(10,10,400,400).attr({fill:'red'}).click(function(){alert('test');});;};警告框仅在单击鼠标左键时显示。关于如何在单击右键时显示​​警告框有什么建议吗?我见过jQuery的这个小技巧:$(r.rect(10,10,400,400).attr({f

javascript - 更改 SVG 路径的宽度/高度

如何更改SVG-edit中选定路径的宽度/高度.到目前为止我只有这个:svgCanvas.changeSelectedAttribute("height","499");以上命令对路径完全没有影响。调整边界框的大小只会调整边界框的大小,但不会调整路径本身。 最佳答案 对于路径,您可能希望应用转换而不是编辑路径坐标,这会变得很复杂。参见http://www.w3.org/TR/SVG/coords.html#TransformAttribute 关于javascript-更改SVG路径的宽

javascript - 使用 Raphael JS 将所​​有 SVG 文本节点转换为路径节点

我正在尝试写一个RaphaelJS将采用Raphaelpaper中现有文本节点的函数实例并将它们转换为路径。目标是完全复制文本在页面上显示的位置、大小和属性,但使用路径而不是文本呈现文本。我最初无法使用Raphaelpaper.print()渲染文本功能,因为文本是动态更新的,并且需要基于“文本”的属性才能这样做。将现有文本节点转换为路径将作为过程中的“最后”步骤发生(在文本修改完成后)。我这样做是为了消除安装字体以便稍后查看或处理SVG的需要。我面临的挑战是:文本节点可能包含带有x和dy定义的tspan。创建的路径必须与每个子节点字母(tspan)完美对齐。检索文本节点的实际位置数据

javascript - SVG - 如何设置文本行高

似乎line-height是svg文本中缺少的一个CSS属性。我找到的关于SVG的最佳资源是:Jenkov.comSVGTutorials而且没有提到它,也没有couldIfindmentionofitonMDN.因此,如果有人可以明确阐明这一点或分享一项技术。我基本上对环绕的文本行之间的间距感兴趣,而不是独立的文本元素。谢谢 最佳答案 SVG1.1(官方)只支持单行文本,因此没有line-height设置。我刚刚尝试在Inkscape中创建一个文本block,它使用flowRoot元素(包含一个带有实际文本的flowPara元素)

javascript - 饼图、条形图、线 : SVG/VML better than Canvas

我需要为“标准”图表选择一个库:饼图、折线图和条形图。根据我的阅读,在我看来最好的格式是SVG/VML,例如Highcharts。SVG正在成为所有主要浏览器的标准,现在IE9接受了它。它似乎比Canvas更容易重新缩放和导出。不过,我看到有几个图表库依赖于Canvas。我错过了什么吗?对于此类应用程序,是否有任何理由考虑使用Canvas而不是SVG? 最佳答案 您通常可以使用其中任何一种获得相同的结果。两者最终都为用户在屏幕上绘制像素。主要区别在于HTML5Canvas使您可以对结果进行像素级控制(读取和写入),而SVG是一种保留

javascript - map 中浏览器的最大 svg 元素数

我正在用传单和d3创建map。map上会绘制很多圆圈。在浏览器兼容性方面,浏览器可以渲染多少svg元素是有预期限制的。然而,就用户体验而言,我更希望用户可以在map上看到尽可能多的元素(否则用户可能需要不断地放大和缩小,并且需要等待ajax返回数据)。我需要考虑一些优化(用户等待时间用户与服务器查询负载与浏览器可以处理的内容)。看图,现在服务器返回的点数有限制,因此只有一部分map被填充。浏览器无法在此处处理完全填充的map,用户也需要等待服务器响应太久。我想我面临的问题需要通过回答两个问题来解决:对于一般浏览器可以处理map上简单svg形状(圆圈)的数量,是否有标准?在map上显示尽