Tag: svg

在将src动态设置为dataURI时，Img.onload不会触发

当imgGraph的src加载了生成的dataURI时，我无法触发onLoad处理程序。 dataURI是使用canvas从d3.js可视化（svg）生成的。 var canvas = document.getElementById(visual + ‘-canvas’); if(visual == “graph”){ console.log(‘graph logic n stuff’) canvas.width = 558; canvas.height = 558; var graph = d3.select(‘#graph-svg’).node(); var svg_xml = (new XMLSerializer()).serializeToString(graph); var imgGraph = new Image(); var context = canvas.getContext(‘2d’); var imageData; imgGraph.onload = function(){ console.log(‘img loaded’) context.drawImage(imgGraph, 0, 0); imageData = getImgData(canvas); console.log(imageData) def.resolve(imageData) } […]

响应式设计中使用Canvas或SVG进行图像遮罩

我试图在网站上渲染图像，好像它们是不同的几何形状。 例如，正常方形图像可以显示为六边形，圆形，五边形，八边形等。 这是一个响应式网站，意味着原始图像的样式max-width: 100%; ，它们的大小取决于它们的容器元素。 我首先想到的是创建几个透明的PNG“叠加图像”，其中每个所需的几何形状在透明区域中“敲出”然后使用z-index覆盖原始图像顶上的掩模。 有没有更好的方法来使用canvas或SVG（甚至其他东西），并仍然允许图像和蒙版在浏览器窗口resize时均匀resize？ 我需要考虑哪些性能考虑因素？ 最终的生产代码将使用jQuery，所以如果我需要它用于任何这些方法，它将在那里。

使用模糊滤镜时，Safari呈现错误的颜色

我尝试将模糊滤镜应用于svg elment，但似乎Safari无法正确渲染颜色。 这是我的问题的一个例子： http://jsfiddle.net/6gZ8t/1/ 苹果浏览器： 铬： 颜色是正确的每个brwoser驱动Safari，它更明亮…有谁知道解决这个问题？

在jVectorMap上绘制自定义标记

我是qQuery的新手，并没有在javascript中做过很多。 我有一个小的jVectorMap，上面有大约10个国家，我想在每个国家的顶部绘制一个小饼图。 我看到你可以创建标记，但我看不出你如何将自定义标记分配给一个国家。 我很高兴只是使用SVG插件直接在jVectorMap上绘图，但我似乎无法让它工作。 例如，使用“jQuery SVG”插件，我试图在地图上绘制一个圆圈。 这是代码： function drawCircle(svg) { svg.circle(75, 75, 50, {fill: ‘none’, stroke: ‘red’, strokeWidth: 3}); } $(function(){ $(‘#europe-map’).vectorMap({ map: ‘north-west-europe’, focusOn: { x: 0.3, y: 0.4, scale: 1.25 }, }); }); $(‘#europe-map’).svg({onLoad: drawCircle}); 这是结果： 实际上，为jQuery SVG“canvas”创建了一个重复的div，并且按下了世界地图。 是否可以引用jVectorMap使用的SVG绘图空间来绘制内容？ 也许有更好的方法来使用自定义标记或类似的东西吗？ 非常感谢，如果这是一个愚蠢的问题，请道歉。

外部SVG文件没有使用JQuery加载

我试图使用JQuery在HTML5中加载简单的svg文件。 但我似乎没有在我的页面中得到这种效果。 请帮我解决这个问题。 我已经浏览并找到了方法，但这对我不起作用。 请参阅下面的代码： SVG文件：（Sample.svg） 脚本： $(document).ready(function(){ $(‘#svgfile’).svg({loadURL: ‘Sample.svg’}); } MyHtml.html：

ASP.NET中标记之间允许的最大值

我有一个在asp.net框架上使用SVG坐标的网页。 通过试用错误，如果我拿出大部分标签，我收到没有错误。 但是，如果所有标签都在我得到以下错误 Compiler Error Message: CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants. Line 195: private global::System.Web.UI.LiteralControl @__BuildControl__control2() { Line 196: global::System.Web.UI.LiteralControl @__ctrl; Line 197: @__ctrl = new global::System.Web.UI.LiteralControl(“\r\n\r\n \r\n\r\n \r\n ” + Line 198: “\r\n \r” + 源代码是 <!– –> +8000多行 我能做什么？ 我需要使用元素标签，因为使用jquery我将发生这些标签的事件。 所以我不能指向该文件。 我需要所有的 […]

单击鼠标更改SVG字体大小

我正在尝试使用以下方法更改SVG文本的大小： $(“#text”+x).click(function(){ //$(this).style(“font-size”, “4”); document.getElementById(“text”+x).setAttributeNS(null, “font-size”, “4px”); //this.attr(“font-size”, “4px”); alert(‘it is I’); }); 你可以在那里看到我失败的大多数尝试。 我收到弹出警报，但没有任何反应，没有错误信息。 我搜索了网络和Stack Overflow无济于事……我正在使用JS + Jquery！ 欢迎任何提示！ 干杯!

SVG在Firefox和IE11中无法正确接收焦点的元素

我已经创造了这个小提琴，所以你可以为自己看到问题。 如果你给一个元素焦点，任何相关的事件都会触发，但焦点实际上并不在元素上，或者至少它似乎不像tabbing会带你回到元素。 在Chrome上完美运行。 这是jQuery： $squares = $(‘a’); $squares.on(‘focus’, function() { $(this).find(‘rect’).attr(‘opacity’, ‘.2’); }).on(‘blur’, function() { $(this).find(‘rect’).attr(‘opacity’, ‘1’); }); $squares.eq(2).focus(); 这里是小提琴： http ： //jsfiddle.net/bigwigal/n3bf8ofe/2/ 任何建议将不胜感激。 谢谢。

限制在一个三角形内

我正在寻找一个通用的代码片段（javascript），它可以与jquery UI一起使用来约束三角形内div的移动（拖动）。 与此类似（http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle）但是是三角形，而不是圆形。 我更喜欢将三角形定义为像这样的rapheal svg …… (function() { Raphael.fn.triangle = function (cx, cy, r) { r *= 1.75; return this.path(“M”.concat(cx, “,”, cy, “m0-“, r * .58, “l”, r * .5, “,”, r * .87, “-“, r, “,0z”)); }; var paper = Raphael(document.getElementById(“triangle”), “100%”, “100%”); var triangle = paper.triangle(100,100,90); triangle.attr(“fill”, “#444444”); triangle.attr(“stroke”, “#444444”); $( “#draggable” ).draggable({ […]

尝试将工具提示function添加到独立SVG文件时，我收到“操作数样式”中的“无效”错误

我试图将工具提示添加到独立的SVG文件，但它返回以下错误： TypeError: invalid ‘in’ operand style [Break On This Error] if ( name in style ) { 对于以下jquery-2.0.0函数： // return a css property mapped to a potentially vendor prefixed property function vendorPropName( style, name ) { // shortcut for names that are not vendor prefixed if ( name in style ) { return name; } […]