Tag: svg

如何让jQuery的’filter’function正常运行SVG节点？: 说我有以下SVG和jQuery： demo $(‘#test’).filter(‘text’).each(function(){ // do something }); filterfunction不适用于SVG，可能是因为jQuery是为DOM操作设计的，而不是命名空间的SVG。但是如何才能使jQuery的filterfunction正确地接受SVG呢？ Sizzle.filter = function( expr, set, inplace, not ) { var match, anyFound, old = expr, result = [], curLoop = set, isXMLFilter = set && set[0] && Sizzle.isXML( set[0] ); while ( expr && set.length ) { for ( var type in Expr.filter ) { if […]

Internet Explorer中的D3 SVG问题: 我在使用D3和SVG显示滚动图例方面遇到了一些麻烦。我的传说因数据而异，可以是任何范围。从1到150 这是一个简单的工作小提琴： https://jsfiddle.net/bikrantsharma/eqnnd84v/ 在Chrome上：一切正常，它滚动得很好但是在IE中，容器显示的高度较小，所有的图例都显示实际的小而且没有滚动因为最大高度永远不会被击中。我已经读过某个地方IE没有正确确定SVG高度所以我们必须使用相对定位并提供初始高度。我尝试过应用相对和绝对定位 .legend-main-div{ height:0; padding:40%; position:relative; } .SVGClass{ top:0; bottom:0; position:absolute; } 其中SVGClass应用于svg元素。这会正确显示图例，但现在我松开了滚动function。有没有办法让滚动图例同时在Chrome和IE中运行？由于某些原因，小提琴中的所有项目都没有显示在我的滚动窗口中，但在我的实际代码中，它工作正常。

使用D3.JS绘制图形: 我正在尝试使用D3.js绘制图形。 file.json是我的JSON文件。日期时间应该在X轴中，销售应该在Y轴中。这是我的JSON结构， [ { Date : “2017-12-17 18:30:01”, Sales : “50” }, { Date : “2017-12-17 17:30:00”, Sales : “20” }, { Date : “2017-12-17 16:30:00”, Sales : “10” } ] 我想绘制图表日期与销售数量。这是我的JS： – .line { fill: none; stroke: steelblue; stroke-width: 2px; } d3.json(“file.json”, function(data) { var canvas = d3.select(“body”).append(“svg”) .attr(“width”, 500) .attr(“height”, […]

SVG Progressbar动画与开始圈: 是否可以将线圈与线路径一起动画？我试过跟随code.can我合并两个线路径和圆圈并应用相同的转换 $(document).ready(function(){ var svgPath = document.getElementById(‘heart’); var path = new ProgressBar.Path(svgPath, { duration: 3000 }); path.animate(-1, { easing: ‘easeOutBounce’, duration: 2000 }, function() { console.log(‘Animation has finished’); }); }); #container { width:220px; position: relative; }

Angular 2：通过UI上的用户输入/事件动态控制SVG图像/图标Css样式: 我使用Jquery在Angular 2中动态控制svg图像的Css样式。 1：使用鼠标hover等事件进行控制下面是一个简单的圆圈.svg图像的示例代码，其中定义了初始样式，并且圆圈上的鼠标hover事件将在hover圆圈时触发“func1”： .st0{ fill:#FFFFFF; stroke:#000000; stroke-width:4; stroke-miterlimit:10; } 现在定义此函数：func1（）在其相应的组件（.ts文件）中，其中包含要使用jquery更改的样式。它看起来像这样： func1(){ console.log(“func1 has been called!”); $(“.st0”).css({“stroke”:”yellow”, “fill”: “blue”}); } 尝试探索其他事件（如“点击”）。 2.通过表格输入进行控制如果要使用表单输入更改svg的样式，则应使用动态绑定。在模板中示例附加代码（以及之前的svg代码）： Stroke Fill Submit 代码需要添加到相应的组件（.ts文件）中： stroke:any; fill:any; submit(){ console.log(“submit called!”+ this.stroke+” and “+ this.fill); $(“.st0”).css({“stroke”:this.stroke, “fill”: this.fill}); }

SVG通过jQuery.svg: 在jQuery svg插件（ http://plugins.jquery.com/project/svg ）中，使用svg从div元素开始执行并在div中创建新的svg对象：将SVGcanvas附加到具有以下内容的a： $(selector).svg(); 是否可以将jquery连接到现有的svg-object？如果“是”怎么做？编辑：建议的提示： function testSvg() { var svgRootElement = $(“#svg3”).get(); var svgWrapper = new $.svg._wrapperClass(svgRootElement); svgWrapper.circle(30, 25, 50, { fill: ‘red’ }); } 导致错误： ‘TypeError：无法获取属性’createElementNS’的值：object为null或undefined’错误… 为什么？

将外部SVG文件加载到变量中并附加到html: 我正在尝试用这个SVG的内容替换嵌入在IMG标签中的SVG图像并将其输出为内联。换句话说，将给定IMG SRC属性的SVG文件的内容加载到变量中，并将其作为内联SVG注入HTML，如下所示： … else if (type && type === ‘img-simple’) { if (format === ‘svg’ ) { $.get(src, function(data) { var svg = $(data); $bg.append(svg); }); } else { … 其中var类型是图像类，格式是图像类型：jpg，sag等。这给了我以下错误： [Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (img01.svg, line 0) [Error] XMLHttpRequest cannot load file:///Users/img01.svg. Origin null […]

如何滚动和动画SVG（绘图）？: 我在插画家中绘制了一个SVG图像。它类似于时间表。当我向上和向下滚动页面时（我使用jQuery / JavaScript），我希望它能够进出。事实上，没有JavaScript，布局是可以的（只有一件事），并且没有任何代码。如果没有JavaScript（或没有JavaScriptfunction的用户），用户已经看到了SVG图像，只需滚动到页面底部，而不会绘制图像。问题1 我想用JavaScript或jQuery来做这件事。我已经研究过高低，尽管我理解了一些JavaScript和jQuery原理，但我并没有理解。我看过Greensock的“Draw SVG”，但你必须付费才能访问该插件，我看过“snap.svg”，但似乎没有得到很好的记录，似乎不支持滚动。在jQuery或纯JavaScript中有没有一个公平的方法呢？问题2 线的起点（左侧）距离边缘几个像素。我似乎无法让它与窗户的左侧齐平。有什么想法？对不起，我暂时无法发布图片 BGDR creative /* This section isfor the default overall styling for the entire site */ html { margin-top: -27px; padding: 0; } body { font-family: quicksand, didact-gothic, sans-serif; text-rendering: geometricPrecision; text-rendering: optimizeLegibility; margin:0; font-style: normal; font-weight: 300; […]

SVG：通过jQuery更新在FF中工作，但在Safari中没有，任何想法？: 我想更新一个嵌入式SVG。我通过使用jQuery css选择器选择SVG元素，并通过jQuery的.attr（）函数改变它的属性。它在FF中按预期工作，但在Safari中没有效果。有任何想法吗？我的HTML里面的SVG： Foo Bar JavaScript的： $(“textPath”).text(“other text”); $(“path”).attr(“d”,”M 60 70 L 90 30 L 300 60 L 180 120 L 60 70″); 工作实例：的jsfiddle 操作系统：Mac OS X 10.7.3 Firefox：11.0 Safari：5.1.5（7534.55.3）

如何用一个角度点改变曲线到直线两点之间的直线: 我需要的当前示例： http ： //jsfiddle.net/2ecsjomz/5/ 笔记：特定的左/右对永远不会改变位置， “left drag”将始终保持在左侧或”right drag” 需要在两点之间形成单个角度点从“左拖”开始的线需要是水平的如果它有助于我不需要点可拖动，它可以有特定的坐标。它需要在两个html元素之间生成行（与示例相同）