Tag: svg
命中testingSVG形状？
已经实现了部分SVG规范的浏览器（Firefox等）为我们免费提供了testing – 如果我在SVG对象上附加了一个mousedown监听器，每当点击形状时我都会得到通知。 这是惊人的，特别是对于复杂的多边形形状。 我想知道是否有一种方法可以利用这个function进行更多的命中testing。 我想知道给定的矩形是否与我的任何SVG形状相交。 例如，我添加了3个复杂的多边形到我的元素。 现在我想知道矩形（40，40，100，100）是否与其中任何一个相交。 有没有人有一个想法，我怎么可能钩入已有的伟大的testing支持可用，而不是自己添加所有的代码？ 谢谢
如何使用html5 canvas / javascript / jquery将svg转换为png并保存在服务器上
那么，我需要一些关于转换.svg文件/图像到.png文件/图像的帮助… 我有一个.svg图像显示在我的网页上。 它保存在我的服务器上（作为.png文件）。 我需要将其转换为.png文件（点击button）并将.png文件保存在服务器上（我将使用.ajax请求来完成此操作）。 但问题是转换。 我读了很多关于html5 Canvas的东西，这可能有助于做我现在需要做的事情，但我找不到任何明确的解决scheme，而且，我不明白我发现的一切…所以我需要一些明确的build议/帮助，我必须这样做。 这里是“html的想法”模板： <html> <body> <svg id="mySvg" width="300px" height="300px"> <!– my svg data –> </svg> <label id="button">Click to convert</label> <canvas id="myCanvas"></canvas> </body> </html> 和一些js： <script> $("body").on("click","#button",function(){ var svgText = $("#myViewer").outerHTML; var myCanvas = document.getElementById("canvas"); var ctxt = myCanvas.getContext("2d"); }); </script> 然后，我需要将svg绘制到Canvas中，取回base64数据，并将其保存在我的服务器上的.png文件中…但是…怎么样？ 我读了很多不同的解决scheme，我其实…失去了…我正在一个jsfiddle，但我其实…无处… http://jsfiddle.net/xfh7nctk/6 / …感谢阅读/帮助
烘焙转换成SVGpath元素命令
tl; dr总结 ：给我资源或帮助修复下面的代码，以便通过任意matrix转换SVG <path>元素的path命令。 细节 ： 我在写一个库来将任意的SVG形状转换成一个<path>元素。 当它在层次结构中没有transform="…"元素的时候，我已经工作了，但是现在我想将对象的局部变换烘焙到path数据命令本身中。 在处理简单的moveto / lineto命令时，这主要是工作（下面的代码） 。 但是，我不确定转换贝塞尔句柄或arcTo参数的适当方式。 例如，我可以将这个圆angular矩形转换为<path> ： <rect x="10" y="30" rx="10" ry="20" width="80" height="70" /> –> <path d="M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100 L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" /> 在没有任何圆angular的情况下，我得到了一个有效的结果： <rect x="10" y="30" width="80" height="70" transform="translate(-200,0) scale(1.5) rotate(50)" /> –> <path d="M10,30 L90,30 L90,100 L10,100 L10,30" /> 然而，仅仅转换椭圆弧命令的x / […]
在ie9中，img元素比例的SVG不受尊重
CSS： img{ max-height:30px; } HTML： <img src="foo.svg" /> 我正在寻找这个svg图像按比例缩放到30像素高的最大高度。 svg的自然尺寸是200px x 200px。 在FF和Chrome（30×30）中效果很好，但在IE9中，图像为30×200。 现在，这是踢球。 它只发生在某些SVG文件，其他SVG正确缩放。 看来区别在于一个是由多边形组成的，另一个是由path组成的。 不能正确缩放： http://www.radiantinteractive.com/rshttp://img.dovov.comallies/other/crocs.svg 确实正确缩放： http://www.radiantinteractive.com/rshttp://img.dovov.comallies/technologyLogos/groovy.svg 关于为什么发生这种情况的任何想法，或者我怎样才能得到第一个在ie9成比例的比例？
jQuery Selector + SVG不兼容？
我一直在使用内嵌SVG和JavaScriptanimation的HTML5文档。 我想在用户点击任何地方时popup一个框，并且当用户单击某个不是框的地方时，我希望框消失。 这意味着我不能使用$(window).click() ，这是$(window).click() 。 我已经试过selectSVG顶部给他们类名称和使用$(".svgclassname").click() ，但这似乎不工作。 也没有用$("#svgname").click()来select单个的。 问题是什么？ （当我用$(window)replace$(".eyesvg")时，当用户点击窗口中的任何位置时，光标附近会出现一个蓝框。
如何在可拖动和可拖放之间画一条线？
我正在使用优秀的JQuery UI做一个“映射”，因此用户可以将一个程序中的人员映射到其他程序中的人员。 使用这个简单的JQuery： $(document).ready(function() { $("div .draggable").draggable({ revert: 'valid', snap: false }); $("div .droppable").droppable({ hoverClass: 'ui-state-hover', helper: 'clone', cursor: 'move', drop: function(event, ui) { $(this) .addClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/check-user-48×48.png"); $(this).droppable('disable'); $(ui.draggable) .addClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/check-user-48×48.png"); $(ui.draggable).draggable('disable'); } }); $("div .droppable").bind("dblclick", function() { $(this) .removeClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/user-48×48.png"); $(this).droppable('enable'); EnableSource($(this)); }); }); 我得到这个： […]
指定一个SVG作为背景图像，并在CSS样式SVG？
是否有可能指定一个SVG作为背景图像，并在同一个CSS文件中样式SVG？ 我很舒服的放置，缩放和裁剪SVG图像，无论是单个文件还是精灵，但是我一直无法弄清楚是否可以在相同的CSS文件中设置SVG作为背景图像。 在伪CSS我想要做以下改变基于父元素的类的简单形状的颜色： element1 { background-image(icon.svg); } element1.black .svg-pathclass { fill: #000000; } element1.white .svg-pathclass { fill: #ffffff; } 显然这假定在SVG中有一个类为.svg-pathclass的path 这可能吗？
删除由angular度组件创build的主机HTML元素select器
在angular2中， svg-rect是一个像下面那样创build矩形的组件， <svg height="550" width="450" x="0" y="0"> <g id="svgGroup"> <svg-rect> <!–template bindings={}–> <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect> <!–template bindings={}–> </svg-rect> <svg-rect> <!–template bindings={}–> <rect x="10" y="10" height="100" width="100" fill="red" stroke="#000" stroke-width="2"></rect> <!–template bindings={}–> </svg-rect> </g> </svg> 但是由于创build了特殊的元素标签，这将不会渲染。 如果svg-rect标签被删除，则呈现rect <svg height="550" width="450" x="0" y="0"> <g id="svgGroup"> <!–template bindings={}–> <rect x="10" y="10" height="100" width="100" […]
用javascript改变SVG图像的颜色
我正在尝试改变JavaScript的SVG图像颜色。 这可能吗？ 我可以加载它作为一个对象，然后以某种方式访问颜色/图像数据。 每个响应或提示高度赞赏！
SVG重新sortingz-index（Raphael可选）
我如何在创build后重新订购Raphael或其基础SVG元素。 更好的是，像SVG中存在的图层一样？ 理想情况下，我希望随时可以在其中放置两个或多个图层。 背景和前景图层。 如果这不是一个选项，那么前面的元素就会popup来，在这个特殊的情况下推到后面会更好。 谢谢，
