Tag: svg

你如何使SVG互动？: 你如何使SVG互动？有谁知道在哪里可以找到教程？我真的想得到一份很好的最新资源列表，以帮助每个人使用SVG学习动态和交互式图形。我正在寻找的“交互性”的一个例子是给出一个SVG事件处理程序，让用户通过图形（AJAX）提交或接收新数据。所有关于SVG的书都是从2008年或更早开始的，所以没有使用现代技术（jQuery或AJAX）。 Stackoverflow上脚本化SVG的所有post都是从2010年开始的，大多数也是从2008年开始的。 SVG的当前资源：拉斐尔拉斐尔似乎是广泛接受的SVG工作库。它似乎提供了良好的高级function。拉斐尔教程关于SVG书籍的老SOpost，所有评论都来自2008年 w3schools SVG教程。非常基本的。

filter：模糊的mozilla firefox 无效: 我正在开发一个页面，它将动画图像，淡入模糊风格。它适用于谷歌Chrome，但在Mozilla Firefox中没有。我为mozilla firefox尝试这种方法。 http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/但图像不可见。这是我的代码： JS： $(document).ready(function() { $(“img”).css({ “filter”: “blur(4px)”, “-webkit-filter”: “blur(4px)”, “-moz-filter”: “blur(4px)”, “-o-filter”: “blur(4px)”, “-ms-filter”: “blur(4px)”, “filter”:”url(‘#blur1’)” }); window.setTimeout(function() { $(“img”).css({ “filter”: “blur(3px)”, “-webkit-filter”: “blur(3px)”, “-moz-filter”: “blur(3px)”, “-o-filter”: “blur(3px)”, “-ms-filter”: “blur(3px)”, “filter”:”url(‘#blur1’)” }); }, 3000); window.setTimeout(function() { $(“img”).css({ “filter”: “blur(2px)”, “-webkit-filter”: “blur(2px)”, “-moz-filter”: “blur(2px)”, “-o-filter”: “blur(2px)”, “-ms-filter”: “blur(2px)”, “filter”:”url(‘#blur1’)” }); […]

如何检查svg路径是否具有与数组中的值匹配的类，如果是，则添加新类: 我有一个数组和一些svg path元素（我使用传单映射）。我需要检查一个路径的类是否匹配我的数组中的一个值，如果是这样，添加一个类fadeIn 。 var foundNations = [“usa”, “France”, “Italy”]; document.querySelectorAll(‘path’).forEach(path => { if (foundNations.includes(path.className)) { path.className.add(‘fadeIn’); console.log(path.className); } }); (function($) { var map = L.map(‘map’).setView([45.4655171, 12.7700794], 2); map.fitWorld().zoomIn(); L.tileLayer(‘https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw’, { attribution: ‘Map data © OpenStreetMap contributors, ‘ + ‘CC-BY-SA, ‘ + ‘Imagery © Mapbox’, id: ‘mapbox.light’ }).addTo(map); var mapHalfHeight = map.getSize().y / 2, […]

在HTML中缩放/调整SVG大小: 我在html中使用svg徽标来显示它。但徽标看起来似乎比它看起来要大得多。我想按比例缩小到100px的高度和宽度。我该怎么办？这是SVG代码： Logo of Accenture <path …………….. 这是我正在使用的HTML代码： Homepage $(document).ready(function() { /*alert(“Home Page Ready”);*/ }); // document .headerTableClass{ width: 100%; } .headerRowClass{ background-color: white; width: 100%; } .tableCell{ padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; } Go to Accenture.com © 2012 Accenture. All Rights Reserved. 谢谢，Ankit。

显示来自sql的数据，点击svg map: 我有一个嵌入到php页面的svg地图： Map Country: Regional Representative //<![CDATA[ // wait until all the resources are loaded window.addEventListener("load", findSVGElements, false); // fetches the document function getSubDocument(embedding_element) { if (embedding_element.contentDocument) { return embedding_element.contentDocument; } else { var subdoc = null; try { subdoc = embedding_element.getSVGDocument(); } catch(e) {} return subdoc; } } function findSVGElements() { var elms = document.querySelectorAll(".emb"); […]

动态地将SVG添加到DOM: 我已经遍布这个网站和互联网，我似乎无法找到一种方法，我明白使用javascript添加svg到dom。有人可以帮我吗？ svg我想在下面添加它。 .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}

使用SVG动画和翻转六边形: 我从来没有真正使用过SVG，而是现在阅读一些关于它的教程并测试了一些东西。我正在学习如何制作像六边形的形状但现在需要使其在垂直轴上向下翻转并扩大尺寸，同时保持非翻转六边形的底部作为新的翻转六边形的顶部。我的代码在这里： #test:hover { fill: yellow; } SVG Testing 我接下来的步骤是什么？我是否使用库来执行此操作？

动画SVG +跨浏览器兼容性: 我在使用http://lazylinepainter.info/创建的动画SVG时遇到问题在Chrome上它完美无缺。但是在Safari，Firefox和iOS上，动画将十字的终点显示为点。这是我的小提琴： http://jsfiddle.net/ric0c/aqn6zkf4/1/ 这是我的svg代码： var pathObj2 = { “strategy”: { “strokepath”: [ { “path”: ” M22.5,59.6c10.8,0,19.5,8.7,19.5,19.5s-8.7,19.5-19.5,19.5S3,89.8,3,79.1c0-10.7,8.7-19.4,19.4-19.5″, “duration”: 600 }, { “path”: ” M177.4,3c10.8,0,19.5,8.7,19.5,19.5S188.2,42,177.4,42s-19.5-8.7-19.5-19.5c0-10.7,8.7-19.4,19.4-19.5″, “duration”: 600 }, { “path”: ” M113.5,155.6c10.8,0,19.5,8.7,19.5,19.5c0,10.8-8.7,19.5-19.5,19.5S94,185.8,94,175.1c0-10.7,8.7-19.4,19.4-19.5″, “duration”: 600 }, { “path”: ” M200.1,57.1c10.8,12.5,17.3,28.8,17.3,46.6c0,39.4-31.9,71.3-71.3,71.3″, “duration”: 600 }, { “path”: “M 141.2 73.7 L 166.2 98.7”, “duration”: 600 }, { “path”: […]

如何避免Rapahel js路径的重叠: 我有一个基于Raphael js的流程图。它与http://raphaeljs.com/graffle.html相同。然而，因为我有许多矩形拉斐尔盒子，我的线路是直线而不是弯曲，如上例所示。在这种直线类型中，这些线有时会重叠，因此很难分辨哪一条线连接哪些盒子。如果我能做到这一点以及如何实现，请告诉我。更新：附加我当前的流程图jpeg。正如你所看到的那样，连接线穿过拉斐尔的形状，而且很难分辨线的起点。

jquery的附加不使用svg元素？: 假设这个： $(document).ready(function(){ $(“svg”).append(”); }); 我为什么看不到任何东西？