草庐IT

svg-sprite

全部标签

javascript - 如何使用 jsdom、D3 和 IJavascript 在 Jupyter notebook 中输出 SVG

我不擅长前端开发,但最近玩了很多Javascript和D3。习惯于使用JupyterNotebooks在Python中进行科学分析,我认为应该可以使用类似的工作流程,在具有JS内核的Jupiternotebook中使用JS代码使用D3开发科学可视化。我看过n-riesco的IJavascriptproject看起来很有希望,但是当尝试导入D3时笔记本会抛出错误://npminstalld3vard3=require('d3');抛出ReferenceError:documentisnotdefined我猜这是因为Jupyter环境(becauseMikeBostocksaysso)中没

javascript - D3 : Zooming/Panning Line Graph in SVG is not working in Canvas

我使用SVG使用d3创建了zooming/panning图形。我正在尝试使用Canvas创建完全相同的图表。我的问题是,当涉及到Canvas图形的缩放和平移时,图形正在消失,我不知道为什么。我创建了两个JSBin来显示两者的代码。有人可以帮助我吗。SVG-JSBinCanvas-JSBin我的SVG缩放代码如下所示://ZoomComponentszoom=d3.zoom().scaleExtent([1,dayDiff*12]).translateExtent([[0,0],[width,height]]).extent([[0,0],[width,height]]).on("zoo

javascript - raphaeljs 的 Mobile Safari SVG 渲染问题

我正在使用raphael制作动画交互式图表我需要在iPhone上正常工作。我遇到了2个小的渲染问题。首先,无论何时单击附加有单击处理程序的svg元素,移动版Safari都会在其周围绘制一个透明的灰色框以指示单击的内容。这与您单击超链接时所做的相同。在这种情况下,灰色框非常难看。是否有任何css属性告诉移动safari不要这样做?第二个问题是动画。对于任何动画的持续时间,移动版safari都会向svgCanvas添加丑陋的黑色边框。它仅在动画进行时可见,并且仅在Canvas的底部和右边缘可见。知道如何解决这个问题吗?这是使用raphael页面上的一个演示的复制和粘贴拍摄的,只有白色背景。

javascript - 为等距 View 转换 SVG 元素

我正在编写一些JavaScript代码以在等距3DishView中呈现标准2DSVG/Canvas元素(使用Raphael-JS绘制)。假设我们绘制了两个相邻的矩形。然后我以正确的Angular(基本上是30度扭曲)重新绘制它们以获得等距View。(在上图中,我显示了两个对应元素的原点。)我的问题是我不知道如何正确翻译所有单独的元素,以便它们正确地“平铺”而不是仅仅重叠。虽然实际使用图block会使事情变得更容易,因为我可以将任何给定图block的放置基于它之前的那个,但在这种情况下,图block将不起作用。一切都是动态的,并且会比简单的x/y平面更复杂。Hereisanimageof

javascript - 我将如何移动带有元素的 SVG 图案

这个问题在这里已经有了答案:HowtomakeSVGimagepatternfillmovewithobject?(4个答案)关闭1年前。我创建了这里看到的svg模式:然后在我的脚本中我创建了一个使用该模式的椭圆。问题是,当我四处移动椭圆时,图案仍然留在它后面,而不是随着椭圆移动。如何配置图案以与元素保持一致?

javascript - 如何在 Webpack 和 Sass 中使用 spriting?

我正在将我的构建系统从带有自定义任务的Grunt转移到Webpack。至于JavaScript模块,它工作得很好,但我不太确定如何处理我的Sass样式表。我在我的AMD模块中依赖于Sass文件,Webpack可以从中读取并生成bundle.css。但理想情况下,我希望我的构建管道使用spritesmith生成sprite,然后将图像复制到构建目录并使用Sassmixins生成正确的CSS规则。我在SO和Google上对此进行了很多研究,但还没有发现任何人在做类似的情况。我应该只使用webpack吗?或者我是否应该有单独的Grunt任务来观看图像、生成Sprite然后在其上运行Webpa

javascript - 如何使用 d3.js 将填充部分添加到 SVG 圆圈

我正在使用d3.js生成一些SVG圆圈。我能够生成它们,但我不知道如何将它们分成4个相等的部分并为每个部分填充颜色。我正在使用d3.js的版本4。这是我的fiddle中的javascript片段:varnodes=[{"type":'family',"id":'f1',"name":'',"image":""},{"type":'person',"id":'p1',"name":'fredflintstone',"age":39,"relationship":"father","sex":''},{"type":'person',"id":'p2',"name":'wilmaflint

javascript - HTMl+SVG+JavaScript : change text at runtime?

我准备将一些基于Flash的应用程序迁移到HTML+JavaScript+SVG(单一目标渲染引擎是Webkit)。我对SVG完全陌生,我想知道我是否可以使用SVG作为模板图像来填充屏幕并从HTML页面中嵌入的JavaScript代码动态更改包含的文本。我想做的是:在Inkscape中绘制页面的基本结构(带有一些图形和文本占位符),然后仅在HTML页面中显示SVG并通过JavaScript填充文本占位符。我可以通过在背景中显示静态SVG图像并在其顶部放置一些绝对定位的DIV来显示文本来获得相同的结果,但是我'我想在Inkscape中设计文本标签的位置、大小和样式。这能做到吗?怎么办?我

javascript - 是否有将整个 SVG 路径移动到新位置的命令?

是否有命令将整个SVG路径移动到新位置,而不是将偏移量添加到路径的每个点? 最佳答案 感谢sehe的评论。解决方法是:将路径包裹成 关于javascript-是否有将整个SVG路径移动到新位置的命令?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/7623296/

javascript - 在打印时隐藏 svg 部分

是否有可能在打印布局中隐藏部分svg。特别是我喜欢隐藏highstockrangeSelector和navigator将打印页面。这应该可以在没有js触发按钮的情况下工作。它应该在使用浏览器打印按钮时起作用。是否有可能使用cssmedia=print显示/隐藏元素并将此事件与jquery绑定(bind)?需要隐藏在打印布局上的黄色部分:http://i49.tinypic.com/24mbxop.png对于这个例子:$(function(){$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl