Tag: svg

当字体大小低于1px时，SVG文本路径点击半径太高

我在D3.js中创建了一些河流 ，并希望它们可以点击 。 所以我创建了一个例子jsfiddle.net/kwoxer/5uc17jwr/19/ 。 在那里你可以看到河流的鼠标hover总体上是好的。 但问题是当字体大小低于1px （例如River 9和River 10）时，它就不再正确了。 不知何故，鼠标hover是错误的，半径太高了。 因此，在font-size 1px下面，您实际上可以将鼠标移离文本，并且河流文本仍然会突出显示。 我想知道为什么它低于1px以及如何解决这个问题。 也许如果有一些禁用outerRadius？ 问题例子 我希望红色和蓝色标记与事件。 红色的将突出11河，蓝色的突出19河： 这几乎是同一个问题，但另一个案例。 因此，当河流的字体大小太小时，蓝色区域也会切换突出显示。 我想禁用该行为：

加载svg文件（xml）并使用javascript提取特定信息

我试图使用jquery / javascript svg示例获取svg文件： Layer 1 Actor Role 并使用类似的东西从文件中提取数据 $.get(file_url, function(data) { var teste=data; },’xml’)// or use text instead of xml 然后获取所有元素，如rect或text，并说得到类似的内容（排除内部”只是为了知道值的来源）： ‘元素’矩形，’重新缩放’无，’移动’静态 和文本（排除内部”）：’元素’矩形，’重新缩放’无，’移动’静态，’text_pos’midcenter，’id’角色名称，’节点值’角色扮演角色 议决-期部分 $.get(file_url, function(data) { var teste=data; //all data rect1=$(”).append($(teste).find(“text”).attr(“id”)).html(); rect2=rect1+”-“+$(”).append($(teste).find(“text”).attr(“text_pos”)).html(); alert(rect2); }); alert(rect2); 问题发现它没有传递可变数据，在$ .get之外 第一次alert(rect2); 给出正确的数据 第二次alert(rect2); 给我未定义 任何人都知道为什么它没有给出一个全局变量：X已经尝试将变量放在外面但是也不起作用 对不起，忘记改变了co：f现在正确了

如何使用Snap.svg为​​加载的SVG内部的路径变形设置动画？

我知道你可以用snap.svg动画路径morhs（ 如何使用snap.svg为​​路径变形设置动画 ） 是否可以“加载”路径然后设置路径变形动画？ 或者你必须定义Snap.svg内部的路径？ (function($) { ‘use strict’; // grab the empty svg element in the html var s = Snap(800,600); // load the svg and grab the #arm and its inner elemmnts Snap.load(‘body.svg’, function(f) { var arm = f.select(‘#arm’), forearm = f.select(‘#forearm’), bicep = f.select(‘#bicep’); s.append(arm); s.append(forearm); s.append(bicep); anim1(); }); // animate rotate […]

jquery + svg：如何在圆圈上方定位文字？

我使用svg jquery绘制一个圆圈 _svg.circle(_X, _Y, _R, { fill: ‘yellow’, stroke: ‘black’, strokeWidth: 1 }); 最重要的是我想要一个文字： var _svgGroup = _svg.group({ fontSize: ’11’, fill: ‘black’ }); _svg.text(_svgGroup, _X, _Y + 15, “#”); 问题是文本总是“在圆圈下面”并且部分不可见。 如何将文字放在圆圈上？ 在svg中有类似z-order的东西吗？ 非常感谢你！

SVG linearGradient DOM仅适用于Chrome

我正在尝试使用jquery更改svg linearGradient的颜色，但我的代码仅适用于Chrome。 任何人都可以帮助我在这里跨浏览器吗？ $(document).ready(function() { $(“.input-holder:first .form-control”).focusout(function(e) { var colorValue = $(this).val(); var s = “#” + colorValue; var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/; var matches = patt.exec(s); var rgb = “rgb(“+parseInt(matches[1], 16)+”,”+parseInt(matches[2], 16)+”,”+parseInt(matches[3], 16)+”)”; $(this).next(“.color-rgba”).html(rgb); var getColor = $(“lineargradient#grad1 stop:first”).css(‘stop-color’); //alert(getColor); $(“lineargradient#grad1 stop:first”).css(‘stopColor’,rgb); }); $(“.input-holder:eq(1) .form-control”).focusout(function(e) { var colorValue = $(this).val(); var s = “#” + […]

如何使用jquery在iframe中定位项目

如何在我的网站上的iframe中定位和设置项目并更改内联值？ 我需要在iframe中定位一个SVG（多个）并用jquery更改填充（颜色），我怎么能这样做但我似乎没有选择它。 inheritance人尝试jquery $(“[id^=like_iframe_]”).load(function() { var frame = $(“[id^=like_iframe_]”).contents(); $(“svg”, frame).css({‘fill’ : ‘red’}); }); 和 $(“[id^=like_iframe_]”).contents().find(“svg”).css({‘fill’ : ‘red’}); 它选择框架，但它没有改变svg的颜色

jQuery SVG map – 从jQuery Ajax中提取JSON内容无法正常工作

以下是我的代码： $.ajax({ type: “GET”, url: “content/content.json”, success: function( data ) { check = true; ajaxMap = data; drawMap(data); } }); function drawMap( data ) { $(‘#map’).mapSvg({ source: ‘maps/test.svg’, colors: { selected: “#00431e”, disabled: “#ffffff” }, tooltipsMode: ‘custom’, zoom: true, zoomButtons: {‘show’: true, ‘location’: ‘left’}, pan: true, responsive: true, zoomLimit: [0,500], marks: data, // here I […]

使用jQuery SVG获取div的SVG表示

我试图得到一个div的svg表示。我正在使用jQuery SVG这个http://keith-wood.name/svg.html 我在页面加载时这样做： var pad = null; $(‘.MyDiv’).svg({onLoad: function(svg) { pad = svg; } }); 在div内部的每一个变化中，我这样做： var svg = $(‘.MyDiv’).svg(‘get’); alert(svg.text); 但我正在提醒一些JS代码。 我试过警告svg.toSVG()但我得到这个： 警报中的 svg.toSVG()似乎工作但我得到空的svg doc即使我的div有数据。 我在这做错了什么？

SVG文字环绕

我一直致力于创建一个显示每月进度的现金温度计。 我遇到SVG文本换行问题，可以使用一些帮助。 动画和其他所有设置，我只是不能正确包装文本。 任何有关这方面的帮助将不胜感激。 下面是我的代码的JS小提琴链接。 您会注意到文本被删除并且无法正确显示。 https://jsfiddle.net/corcorancr/4pto1wm5/1/ //– Draw Goal line if (this.currentProgress >= this.currentGoal) { this.drawTick(maxTemp, “Goal of ” + this.currentGoal + ” Reached! ” + this.currentProgress + ” receieved!”, “Black”, 0, width, tubeWidth, tubeBorderColor, scale, svg); } else { this.drawTick(maxTemp + 3, “Goal: ” + this.currentGoal, “black”, 0, width, tubeWidth, “Black”, scale, svg); […]

如何在单个html页面中将多个svg转换为png？

我使用d3和venn.js来创建这个维恩图。 代码在这里：Svg实际上是通过这些脚本在div venn2中创建的。 var sets = [ {sets:[“A”], size: 12, label: “A”}, {sets:[“B”], size:12, label: “B”}, {sets: [“A”, “B”], size: 4, label: “AB”} ]; var chart = venn.VennDiagram() .wrap(false) .fontSize(“14px”) .width(400) .height(400); function updateVenn(sets) { var div = d3.select(“#venn2”).datum(sets); var layout = chart(div), textCentres = layout.textCentres; div.selectAll(“.label”).style(“fill”, “white”); div.selectAll(“.venn-circle path”).style(“fill-opacity”, .6); return layout; } 我在这里通过canvas将svg转换为png的脚本。 […]