草庐IT

svg-animate

全部标签

javascript - 查找 SVG 元素的类名

如何找到SVG属性的类名?如果它是div它将是{referencetoDIV}.className但是,这与SVG元素的工作方式并不完全相同是否有任何jquery或javascript方法/属性来获取SVG元素的类?请看下面我尝试过的内容: 最佳答案 这是一个jsfiddle:http://jsfiddle.net/Ujp76/window.addEventListener("load",function(){varclassName=document.querySelector("svg").getAttribute("class

javascript - 如何使用 snap.svg 为路径变形设置动画

我一直在寻找一个关于如何为svg路径变形设置动画的好例子。我知道如何使用SMIL来做一些非常复杂的事情,但是snap.svg是新的和Shiny的,而且每个人似乎都喜欢它,所以我想看一看。我在任何地方都找不到关于如何在任何地方进行动画路径变形的好例子。希望snap.svg专家能为我指明正确的方向?这是svg图像的链接及其代码:linktoimage 最佳答案 不太确定您的意思是只想要Snap中的当前动画还是其他内容。只是举例说明通常如何制作一些动画...s=Snap(400,620);varpath=s.path("M94.2,265

javascript - 如何使用 Snap.svg 更新 SVG 文本元素?

我正在使用Snap.svg加载SVG图像并向其添加文本元素。但是,我需要能够在页面加载时更新文本元素。现在,我正在做这样的事情:varsvg=Snap("#selector");vartext;Snap.load(path_to_file,function(f){svg.append(f);varg=svg.select("g");text=g.text(x_pos,y_pos,label);}假设我想稍后更新文本,我该怎么做?我保证在调用load后创建text对象。我设法修改文本的唯一方法是为元素设置一个id,然后像这样使用jQuery进行修改:self.selector.find(

javascript - Snap.load() 外部 SVG 加载失败

问题:我正在使用Snap.svg创建一些基本的交互式图形,但出于某种原因,我无法使用Snap.load()加载我的外部SVG文件。我直接从tutorial中提取了代码在snap.io上检查并仔细检查了文档。我的SVG文件在浏览器中呈现良好,只是不显示在SnapSVG中。其他形状(即未使用Snap.load()拉入)会显示。代码:我已将我的示例简化为可以想象到的最简单的HTML和SVG文件,但Snap.load()方法仍然对我不起作用。有人看到我错过了什么吗?HTML:#svg{width:300px;height:300px;}vars=Snap("#svg");Snap.load("

javascript - 标点加载 "animation",javascript?

我正在寻找一种显示一些标点符号加载“动画”的好方法。我想要的是这样的:Thiswilldisplayatsecond1:"Waitingforyourinput."Thiswilldisplayatsecond2:"Waitingforyourinput.."Thiswilldisplayatsecond3:"Waitingforyourinput..."Thiswilldisplayatsecond4:"Waitingforyourinput...."Thiswilldisplayatsecond5:"Waitingforyourinput."Thiswilldisplayatsec

javascript - 在 JavaScript 中对 SVG 形状的鼠标右键单击检测不起作用

我的脚本需要一些帮助,我想在其中检测人民币点击。信息:最后我想在一个专用的SVG形状上显示我自己的右键单击菜单,它是使用Raphaeljslib显示的,我发现网上有很多不同的例子,甚至是非常简单的实现,比如使用jQuery-但我必须能够检测到人民币是否被点击或任何其他。我已经尝试(在RMB上没有成功)以下代码和平:window.onload=function(){varpaper=newRaphael(document.getElementById('canvas_container'),300,300);varshape=paper.path('m150,150l40,0l0,20l

javascript - 是否可以线性渐变填充 SVG 中的分组路径(通过 jQuery 事件上的 css 或 attr)

我如何为填充一个渐变?在SVG图像中而不是填充所有s在选定的?在这种情况下,我想展示非洲,只填充一个从黄色到红色的渐变,但由于子组的原因,填充会产生许多渐变。JavaScript:functionsvgOver(){varwhat=$(this).attr("id");$("#world#"+what,svg.root()).attr("fill","url(#red_black)");}functionsvgOut(){$(this).attr("fill","");}...$("#map").svg({loadURL:'http://teszt.privilegetours.hu/

javascript - SVG 的自由变换插件 - 创建占位符元素

我正在尝试创建html5拼贴编辑器,您可以在其中以类似于在Word中看到的方式编辑图像(在拖动边缘时裁剪图像而不是缩放图像,能够在自由变换中拖动/旋转/缩放图像区域(占位符功能)等)。这意味着我们需要使用SVG和剪辑/蒙版,并将自由变换元素的位置绑定(bind)到这些蒙版/剪辑。整个生成的SVG稍后应该可以针对打印尺寸进行缩放(但这不是这里的问题)。这个想法很简单——使用已经制作好的jQueryFreeTransform插件-https://github.com/gthmb/jquery-free-transform绑定(bind)它的控件区域转换为SVG蒙版问题:即使转换后的SVG蒙

javascript - svg viewbox 不应该调整文本 fontSize 的大小?

我将svg与viewBox一起使用以适合容器,它工作正常,当我调整容器大小时,svg圆圈和文本正在调整大小并适合容器但我不想在调整大小时调整文本fontSize容器。我搜索了很多但没有找到任何有值(value)的建议。我需要调整div和svg圆圈的大小,但文本不应调整字体大小,而且文本应与圆圈一起移动。如有任何建议,我们将不胜感激。以下是我在我的应用程序中使用的SVGCircle这是Demo注意:调整jsFiddle的大小 最佳答案 将View框移出根svg标签并移入嵌套的svg标签。将文字放在嵌套的svg标签外面,viewbox不

javascript - 内联 SVG 与 <object> 嵌入式

我正在为EveOnline构建一个游戏内浏览器RoR应用程序。我的应用程序的要求之一是显示由graphviz生成的SVG图形。我在这个环境中无法满足我的要求。Eve的IGB没有官方文档,但wiki指出:ThenewEVEOnlinein-gamebrowser(code-namedMoondoggie)isbasedonatechnologystackcombiningtwoelements:Awesomium:Amiddlewarelayerthatdeliversrenderedwebpagesasdataparseablebya3Dengine.Awesomiumisdevelo