Tag: svg

testingd3（以及其他基于SVG的）Web应用程序: 我有一个Web应用程序，使用d3库来处理一些复杂的基于SVG的可视化。我有自动testing我的服务器端代码和JavaScript模型（我在我的JavaScript中使用MVC架构）。这些在每次提交时都在Jenkins CI服务器上运行。现在我需要弄清楚如何testing我的观点。别人怎样解决这个问题，你用什么工具？我有一些想法… 将生成的SVG序列化到文件并与基线进行比较自动捕捉浏览器图像，并做一个图像差异别的东西？谢谢！

HTML5中可以使用类似Photoshop的混合模式吗？: 我想在网页上放一个红色的长方形的<div>元素，这样看起来不仅透明，而且像Photoshop的Multiply模式一样。 <div> position: fixed ，所以下面的内容会很快改变。这是可能的任何HTML5 / CSS3 /帆布/ SVG技巧？

raphael.js vs paper.js: raphael.js和paper.js之间的主要区别是什么？有没有其他的库在那里我应该看看？任何像这些更专注于CSS3然后SVG？谢谢！

如何使用D3.js将图像添加到svg容器: 我已经创build了一个示例Asp.Net MVC 4应用程序，我已经使用了D3.js来附加一个SVG元素，然后在SVG里面添加了一个文本元素（见下面的代码）。这一切工作正常，直到我尝试使用本地PNG文件附加img到SVG。 img被附加到DOM，但img不在页面上呈现。任何想法我在这里做错了，以及如何去解决它？ @{ ViewBag.Title = "Home Page"; } <script src="~/Scripts/d3.v3.js"></script> <script type="text/javascript"> var svg = d3.select("body") .append("svg") .attr("width", 200) .attr("height", 100) .style("border", "1px solid black"); var text = svg.selectAll("text") .data([0]) .enter() .append("text") .text("Testing") .attr("x", "40") .attr("y", "60"); var imgs = svg.selectAll("img").data([0]); imgs.enter() .append("img") .attr("xlink:href", "@Url.Content("~/Contenthttp://img.dovov.comicons/refresh.png")") .attr("x", "60") .attr("y", "60") .attr("width", "20") […]

（移动）浏览器中针对CSS3硬件GPU加速优化基于SVG的精灵表: 在过去的一周里，我一直在帮助朋友在浏览器中使用基于SVG的精灵表单进行实验。我们想要提出一个理想的工作stream程，在浏览器中准备，发布和运行高质量的animationgraphics。所以最好有一个animation数据源，可用于小型智能手机屏幕，平板电脑，视网膜显示器和桌面浏览器。从理论上讲，基于vector的SVG应该是理想的，但是由于SVG通常不被使用，所以我们决定对它进行testing。这个想法不是使用SMIL SVG（所以没有基于SVG的animation），而是创build一个animation精灵表（像通常的光栅数据PNG / JPG一样），但是用纯vector即SVG来做。它有点大，但是如果这样做的话 – 甚至可以更好地进行工作。加上逐帧的vectoranimation可以为我们的工作stream程做很多事情 – 它可以让我们使用Flash编辑器来做animation，然后将它们导出到SVG精灵表。无论如何，结果出人意料的好，但也在一些地区失败（请注意，为了testing目的，我们只使用基于Webkit的浏览器，例如Safari，Chrome，iOS上的移动Safari和Android ICS）。在CSS中，像这样触发一个精灵表的硬件加速是非常容易的（至less在具有关键帧和步骤的现代浏览器中） – 你只需要这样做： background-image: url(my.svg); -webkit-animation: walk 1s steps(12, end) infinite; 调用此处显示的基于关键帧的animation： @-webkit-keyframes walk { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); } } 在iOS移动版Safari和Android ICS浏览器中，translate3d的使用应该让GPU能够使用硬件加速。令人惊讶的是，考虑到这是一种蛮力技术和相当大的vectoranimation（600x600px的testing） – 整个事情飞行。但它并不完美 – […]

弃用的SMIL将SVGanimationreplace为CSS或Webanimation效果（hover，单击）: 按照这个话题： Firefox 38-40 SMIL问题 – 速度非常慢（从22.09.15在FF版本41中parsing）和这个话题：意图弃用：SMIL SVG标签“animateTransform”不能正常工作。用CSS或CSS转换代替SMIL（animation标签）会很好。 CONSOLE WARNING: Please use CSS animations or Web animations instead), which would work fast on the latest versions of Firefox and Chrome. 下一个Google Chrome警告： CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated and will be removed. Please use CSS animations or Web animations […]

如何将ggplot2的绘图保存为SVG: 我想用ggplot2作为SVG保存一个堆积区域图（代码示例可以在这里find）。尝试了开罗套餐，但结果是糟糕的。 library(ggplot2) library(grid) library(Cairo) … #png(output_file, width=800, height=400) Cairo(800,400,file=paste(output_file, ".svg", sep=""),type="svg",bg="transparent",pointsize=8, units="px",dpi=400) gt <- ggplot_gtable(ggplot_build(p)) gt$layout$clip[gt$layout$name=="panel"] <- "off" grid.draw(gt) dev.off()

平滑SVGmatrix在Inkscape中转换: 我有一个免费的剪贴画SVG文件，最初在Inkscape中创build，我正在修改以用于Windows 8 JavaScript游戏。它包含了一个matrix变换应用于周围组的path的许多实例，如下所示： <g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)"> <path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" /> </g> 我希望通过将其应用于Inkscape的path来平滑这一转换，从而减lessanimation过程中的浏览器工作。但是，当我将这6个matrix值插入Inkscape中的ABCDEF参数并应用它时，它将为IE10引擎提供完全不同的旋转和缩放比例。我已经检查了很多次，我已经正确映射了6个值。我究竟做错了什么？编辑：好的，这里是从IE10和Inkscape截图之前和之后。对于IE10的情况，SVG直接驻留在空的HTML文档的主体内（在Firefox中呈现完全相同）。在Inkscape中，我只打开了“before”SVG文件，其中只包含path元素，select了path，并将6个matrix变换值插入到Object> Transform> Matrix中。我对matrix知之甚less，我只是希望能够像浏览器一样预先应用这些转换，理想地理解为什么Inkscape有所不同。谢谢。

如何创build一个SVG“工具提示”像框？: 给定一个现有的有效的SVG文档，创build“信息popup窗口”的最好方法是什么，所以当你hover或点击某些元素（比方说），你popup一个任意数量的盒子（即不只是一个单一的工具提示）额外的信息？这应该至less在Firefox中正确显示，并且在图像被栅格化为位图格式时不可见。

将JavaScript生成的SVG转换为文件: 我正在使用d3.js来可视化一些数据。我希望能够将它生成的SVG代码存储为.svg图像文件（用于Inkscape / Illustrator中的编辑）。我试图简单地复制svg标签的内容即 <svg> <!–snip–> </svg> 到一个名为image.svg的文件中，但是这会遗漏在两个单独的CSS文件中的颜色/样式信息上。我正在使用这个例子。有一个简单的方法来做到这一点？