Tag: svg

使滚动增长变为虚线: 这是我迄今为止在stackoverfow本身的朋友的帮助下所做的。它工作正常，但我想做一个对我来说有点复杂的动画。 // Get the id of the element and the length of var myline = document.getElementById(“myline”); var length = myline.getTotalLength(); circle = document.getElementById(“circle”); // The start position of the drawing myline.style.strokeDasharray = length; // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw myline.style.strokeDashoffset = length; // […]

为什么.html（）不能与使用jquery的SVG选择器一起使用？: 问题可以有人告诉我如何将我的SVG元素转换为字符串？我正在使用canvg将我的SVG转换为图像。它必须先在canvas中渲染， canvg()方法需要SVG STRING 代码： function updateChartImage(){ canvg(document.getElementById(‘canvas’),expecting ` svg string`); var canvas = document.getElementById(“canvas”) ; var img = canvas.toDataURL(“image/png”); img = img.replace(‘data:image/png;base64,’, ”); $(“#hfChartImg”).val(img) ; $(‘#img’).attr({ src: img }); } 我试过了 $(‘#container svg’).html() ; // it gives me an error //Uncaught TypeError: Cannot call method ‘replace’ of undefined 注意到 $(‘#container svg’) $(‘#container’).html() // […]

在CSS之前或之后更改SVG填充颜色: 我有一个像这样的SVG图形： a::before { content: url(filename.svg); } 当我将鼠标hover在标签上时，我真的希望SVG更改填充颜色，而不加载新的SVG文件，就像我现在一样： a:hover::before { content: url(filename_white.svg); } 这可能是使用JavaScript，jQuery或只是我不知道的纯CSS吗？谢谢。

无法通过jQuery在SVG中添加图像：标签变为: 我想通过jQuery在SVG中添加项目。我可以插入诸如或之类的标签，但是我无法插入带有标签的。此标记自动变为，无法在SVG中显示图像： http ： //jsfiddle.net/G4mJf/ 我怎么能阻止这个？如果不可能，是否有另一种方法可以使用JavaScript / jQuery在SVG中插入图像。

是否可以将HTML表单输入标签与SVG混合，或者使用SVG来布局表单？: 我们喜欢使用带有SVG的JQuery模板来展示具有漂亮风格的产品。假设我们有一个代表复杂布局的SVG。是否可以将标记嵌套在SVG中并仍然在HTML 5中工作？ SVG中是否有替代方案可以从用户输入数据，也可以使用Knockout.js提取它们？我知道你可以在背景图形的意义上使用SVG并破解位置，以便表单字段排列。如果可能的话，我真的很有兴趣让SVG传入输入语句。

jQuery ajax似乎改变了发送到coldfusion服务器的SVG数据: 我正在使用$ .ajax（）将字符串发送到coldfusion服务器，并将其存储在表中。当我稍后查询并尝试使用该数据时，我收到错误; “null Enclosed Exception：3字节UTF-8序列的字节2无效”。首先，我从DOM中获取SVG并将其发送到操作页面。它应该只是一个字符串，对吗？ var lclSVG = $(‘#myDiv’)[0].innerHTML; // SVG Code (XML?) $.ajax({ url: “myAction.cfm”, type: “POST”, data: ({myInfo: lclSVG}), }); 在myAction.cfm页面上，我将数据更新为表格。 UPDATE myTable SET svg = ‘#form.myInfo#’ WHERE ID = 1 SVG2PNG.cfm：当我尝试查询并使用svg数据时，我收到错误“3字节UTF-8序列的无效字节2”。错误发生在.transcode行上。 SELECT svg FROM myTable WHERE ordID = 1 transcoder = createObject(“java”, “org.apache.batik.transcoder.image.PNGTranscoder”).init(); inputStream = createObject(“java”, “java.io.StringBufferInputStream”).init(svg); input […]

如何使用jquery在窗口resize上缩放Raphael js元素: 如何在窗口更换时重新调整Raphaelcanvas内的所有元素？考虑下面的代码/ 演示如果我重新调整我的窗口大小只有div container缩放，因为我将其宽度设置为窗口宽度的50％而没有（ rect ， circle或path ）更改码 #container{border : 1px solid black ; width : 50% ; height:300px} var con = $(“#container”); var paper = Raphael(con.attr(‘id’), con.attr(‘width’), con.attr(‘height’)); var win = paper.rect(0,0,400,300).attr({stroke: ‘black’ }) ; var path = paper.path(“M 200 100 l 100 0 z”) ; var cir = paper.circle(50, 50, 40);

为什么，当我在循环中添加一堆事件侦听器时，每个元素是否会触发添加的最后一个侦听器？: 在页面上，我有一张美国和加拿大的SVG地图，以及省和州的HTML列表。 hover在任何省份上，无论是列表中的名称还是地图上的描述，都应使名称和描述变为不同的颜色。所有名称和路径都已具有逻辑ID /类。这是我的代码的小提琴。（这是一个可怕的程序混乱，所以请原谅我。） jQuery的事件函数不适用于SVG，虽然我知道有一个jQuery插件可能会有所帮助，但我认为这将是一个使用比我习惯的更大比例的香草Javascript的好机会。代码中最相关的部分是Javascript第46到69行的makeMapInteractive函数： function makeMapInteractive(provinces) { for(var province in provinces) { // Iterate over every state/province code var $HTMLtargets = $(‘ul.provinces li.’ + province); var $SVGtargets = $(‘path#{0}, g#{0} path’.format(province)); var $allTargets = $HTMLtargets.add($SVGtargets); // I tried it first with $().each(); when that didn’t work, // I commented it out […]

jQuery动画SVG元素: 我的应用程序中有一个svg。喜欢我有一个名为’1_dice’的svg元素。在HTML按钮单击中，我希望根据参数为元素设置动画。喜欢 $(‘#btn’).click(function(){ $(‘#1_dice’).animate({‘x’:200},2000); }); 我试过这个，但这不起作用……

如何处理面料JS图像掩码？: 我正在尝试实现图像掩码，如下所示：示例图片： https ： //s3-ap-northeast-1.amazonaws.com/utonly/demo/demo.jpg 我已经尝试了很多方法并花了很多时间，但仍然无法找到一个好的解决方案。图像必须能够在蒙版内resize和旋转，或从另一个视图编辑，然后将结果应用回图像。我在http://jsfiddle.net/tbqrn/68/找到了类似的例子，但我不想让图像互相传递。那可能吗？或者我有没有机会尝试其他方法来做到这一点？ var img01URL = ‘http://sofzh.miximages.com/jquery/printio.png’; var img02URL = ‘http://sofzh.miximages.com/jquery/pug.jpg’; var img03URL = ‘http://sofzh.miximages.com/jquery/ladybug.png’; var img03URL = ‘http://sofzh.miximages.com/jquery/ladybug.png’; var canvas = new fabric.Canvas(‘c’); var ctx = canvas.getContext(“2d”); ctx.beginPath(); ctx.rect(10,10,150,150); ctx.rect(170,10,200,200); ctx.rect(10,170,150,150); ctx.closePath(); ctx.stroke(); ctx.clip(); fabric.Image.fromURL(img01URL, function(oImg) { oImg.scale(.25); oImg.left = 10; oImg.top = 10; canvas.add(oImg); canvas.renderAll(); }); […]