Tag: svg

Raphael dropshaws插件firefox和歌剧问题在svg路径上: 我在尝试基于raphael blur插件的dropshadow.raphael.js插件时遇到了一个奇怪的问题（我尝试使用cssfilter插件，同样的问题）。我正在画一条Bezier路径并添加了这些阴影： var borderBottomRounded = paper.path(“M150,100C20,200,600,200,400,100”); borderBottomRounded.attr({‘stroke’:’#000000′, ‘stroke-width’:’1′}); borderBottomRounded.dropShadow(1,0,1,0.5); // dropShadow(size, offsetX, offsetY, opacity = 1) 在那里，影子在每个浏览器上运行正常（还没有尝试IE）。比我画一条直线，像这样的阴影： var borderBottom = paper.path(“M 0,100 L800, 100”); borderBottom.attr({‘stroke’:’#000000′, ‘stroke-width’:’1′}); borderBottom.dropShadow(1,0,1,0.5); $content是我的raphael paper因为我希望它能占据整个宽度。我无法将viewport用于我正在做的事情。但是这条路径在Firefox或Opera上消失了（使用webkit浏览器很好）。我该如何解决这个问题？目前，我只是为Firefox和Opera禁用了这一行的影子，但我正试图找到一种更好的方法来做到这一点…… 查看关于小提琴的实例。另一个尝试使用cssfilter插件。包括jQuery 1.9.1，Raphael 2.1.0和raphael dropshadowin插件。编辑通过使用rect而不是行来修复，因为在应用filter时元素需要具有高度（感谢Robert Longson）： var borderBottom = paper.path(“M 0,100 H800 v1 H0 […]

单独的Divs内的Google Visualizations图表的多个实例: 我试图在同一个屏幕上的不同div中显示几个Google Gauge图表。我还需要处理这些div上的click事件（因此是图表）。我试图动态地这样做，但我遇到了一些问题。但无论如何，即使我尝试静态（有效），我仍然无法使图表区域可点击。发生的事情是整个div是可点击的，除了图表区域。无论如何，这是我的（杂乱测试）代码： document.getElementsByClassName = function (cl) { var retnode = []; var myclass = new RegExp(‘\\b’ + cl + ‘\\b’); var elem = this.getElementsByTagName(‘*’); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; google.load('visualization', '1', {packages:['gauge']}); google.setOnLoadCallback(function […]

在拖动时避免使用文本锚跳转SVG文本: 这是一个带锚点的SVG文本： I love SVG 现在，如果我写一个拖动function： var dragMove = function (d,i) { //d3.select(this).attr(“text-anchor”, “null”); Does not work d3.select(this).attr(“x”, d3.event.x) .attr(“y”, d3.event.y); }; var dragEnd = function (d,i) { //d3.select(this).attr(“text-anchor”, “start”); Does not work }; var drag = d3.behavior.drag() .on(“drag”, dragMove) .on(“dragend”, dragEnd); d3.select(“svg”) .select(“text”) .call(drag); 根据其锚点位置拖动它后会跳转。这个问题有方法解决吗？我尝试将anchor-text设置为null，然后再次重新设置它，但这不起作用。我不希望拖动的用户体验完全改变。甚至在拖动完成时也是如此。任何的想法？这是JSFiddle： http ： //jsfiddle.net/sewVr/

JQuery3.0抛出错误设置一个只有一个getter firefox的属性: 我已经动态创建了SVG圈，并使用JQuery将它小动画为大圈。动画在其他JQuery版本中运行良好，并且仅在JQuery 3.0版中引发exception“设置只有getter的属性” 。我在网上搜索过。它会导致由于属性没有setterfunction。 _animateCircle: function (element, delayInterval) { var radius = element.getAttribute(“r”); var scaleVal; var $ele = $(element); var layer = this; $ele.delay(delayInterval).each(function () { }).animate( { r: radius // if i comment this line, exception not occur. But animation not working }, { duration: 700, step: function (now) { scaleVal = […]

jQuery $（document）.ready和svg-web window.onsvgload: jQuery当然要求一切都在里面 $(document).ready = function() {}; 同样，svg-web要求： window.onsvgload = function() {}; 有没有一种正确，优雅的方式来结合这些不会带来任何问题？

JQuery + SVG对象：正确捕获点击事件: 好的，我正在尝试捕获菜单项上的点击事件这是我的HTML：这是我正在使用的脚本： $(“#wrapper”).on(“click”, ‘#friendsLink’, function(){ console.log(‘test’); loadFriends(); }); 当我使用脚本选择一个简单的a-tag时，它工作正常，但在这个svg对象上它根本不起作用。请注意，单击li元素的填充区域时，它确实有效。但在点击svg-image区域时却没有。这个post中的post表明svg dom与html dom不同，因此jquerys事件失败了。 jQuery Selector + SVG不兼容？尝试处理svg元素上的点击事件时，该怎么办？帮助非常感谢

内联SVG上的Jquery toggleClass: 我有一个内联SVG（一个站点地板工厂的考古图）的布局，在侧边栏中有一些解释性文本，我想通过切换来改变我在SVG中创建的组的一些属性。不同群体的class级。我正在尝试使用JQuery的toggleClass()但它无法正常工作。我想将类上的更改绑定到侧栏上元素上的一些单击事件。 Jquery不能与SVG一起使用吗？

如何设置SVG rect元素的背景图像？: 我使用keith-wood的jQuery SVG插件创建了一个SVG rect。这是代码： svg.graph._wrapper.rect(group, 0, 100, 40, 20, {fill: ‘ivory’, stroke: ‘black’, strokeWidth : 2}); 所以我认为我可以轻松更改填充而不是使用’象牙’，我将其更改为’theImageIwantToUse’。但它似乎没有用。

在IE9-11中使用jQuery更新SVG文本: 我正在尝试使用jQuery更新SVG路径上的文本。它在Firefox和Chrome中运行良好，但在IE9和IE11中（尚未在10上测试，但可能相同）文本未更新。任何想法/解决方法？到目前为止这是我的代码： svg { background:url(_skins/cf/pics/ribbon.png); } <!—-> Text text text $(‘#ribbonLeftText’).html(‘bla bla bla’);

使用来自通过ajax发送的dataURI的php生成png文件: 我有一个生成dataURI-png的svg文件，效果很好。我希望将dataURI保存为图像，因此我尝试通过ajax将dataURI发送到另一个可以执行PHP的服务器。但我无法让它发挥作用。这是生成dataURI的代码（有效） var mySVG = document.querySelector(‘svg’), // Inline SVG element tgtImage = document.querySelector(‘.tgtImage’); // Where to draw the result can = document.createElement(‘canvas’), // Not shown on page ctx = can.getContext(‘2d’), loader = new Image; // Not shown on page console.log(mySVG); loader.width = can.width = tgtImage.width; loader.height = can.height = tgtImage.height; loader.onload = function(){ […]