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文件中的颜色/样式信息上。 我正在使用这个例子 。 有一个简单的方法来做到这一点?