在支持字体元素的 HTML5 Canvas 上绘制 SVG
是否有一个很好的库可以将 SVG 转换为支持字体元素的 HTML 画布?我已经尝试过 canvg，但它不支持字体. 解决方案 支持 HTML5 Canvas 的浏览器本身也很好地支持 SVG.因此，您可以这样做: var img = new Image;img.onload = function(){ myCanvasContext.drawImage(img,0,0);};img.sr
..
svg相关内容
像 SWF 一样缩放 SVG (Raphael.js)
几天前我开始使用 Raphael.js，我真的很喜欢它.我唯一无法弄清楚的是如何让“paper"或 svg/vml 标签像 swf 一样填充浏览器窗口.看这个例子. 注意上面例子随着浏览器窗口调整大小的方式 我能够使用浏览器窗口调整“纸张"的大小，但没有运气让所有矢量图形调整它们的大小.任何反馈将不胜感激. 编辑 我为此尝试了许多不同的路线.viewBox 效果很好，但只有
..
XSLT 2.0:将纯文本中的符号转换为 svg
我不熟悉不同格式之间的转换.我的目标是将纯文本格式的工具包中的符号传输到 svg.一个简单的例子是我有一个橙色的椭圆，符号是这样的(x 和 y 是坐标系，所以 0 和 0 表示椭圆在中间): GRAPHREP笔颜色:$000000 w:2pt填充颜色:$ff7f00椭圆 x:0pt y:0pt rx:114pt ry:70pt 我想要的输出将是这样的 svg 代码(示例中随机选择了 cx
..
使用 XSL 将具有 2 个或更多值的 XML 属性转换为 SVG x/y 坐标
我需要将 xml 属性中的值通过 xsl 转换为 svg rect pos x 和 y 因此需要解析自 示例 按照一些规则解析每个项目的值属性(这是我不确定的部分，如何将数字提取到单独的变量中) 喜欢 X Z Y 在 var1 中提取 X (20) 和在 var
..
svg 不适用于本地主机上的 IIS 网络服务器
我正在尝试使用 css 将“.svg"图像设置为背景图像，但它不起作用.url 有效并返回 200 状态代码并适用于“.png"图像. 有什么问题? 解决方案 您的 IIS 很可能没有配置 SVG 作为内容类型，请尝试添加 在您的 we
..
SVG 中线图的双 x 轴
我已经开始研究 D3.js 和 Dimple.js.我们的要求是创建一个具有双 x 轴的折线图.对此需求进行基础研究后，我发现 D3.js 或 Dimple.js 支持双 y 轴但不支持双 x 轴. 我的第一个问题是“D3.js 或 Dimple.js 是否支持像盒模型那样的双 x 轴?". 解决方案 D3 已经支持双 x 轴.您可以根据需要多次调用 d3.svg.axis() 来创
..
D3:选择和更改外部 SVG?
是否可以在 Adobe Illustrator 中创建的嵌入(外部)SVG 中选择和更改元素? html: circles.svg:
..
为什么我的响应式 D3 图表上的某些网格线会随机消失?
我为我的 D3 图表创建了一个精简的JSFiddle.我使用以下解决方案使其具有响应性(使用 viewbox 和 preserveaspectratio):响应式 D3 图表 当我调整窗口大小并使其变小时，一些网格线似乎消失并重新出现.我认为这在小分辨率下看起来很糟糕(例如 320x480 手机).当窗口变小时，有没有办法保留我的网格线? HTML 代码:
..
如何在 SVG 路径中设置每条线的颜色或宽度
我使用路径来创建一个三角形， svg.append("path").attr("d","M" + x(0) + "," + y(0) + " L " + x(1) + "," + y(1) + " " + x(-1) + "," + y(1) + " " + x(0) + "," + y(0) ).style({笔画:'黑色'，'笔画宽度':1，填充:'红色'}); 如何设置每条线的描边颜色或
..
如何在 svg 上监听键盘事件
我有一个 svg，我可以在这个 svg 上绘制多个形状.现在我的要求是我想听键盘事件，如 ctrl+C、ctrl+V、ctrl+D、Esc、Delete，以便我可以复制、粘贴、复制选定的形状.但我不知道在 SVG 上监听键盘事件.我尝试了以下代码，但没有成功！ mySVG.on("keydown", function () {//处理keydown的代码}); 有什么帮助吗?提前致谢.
..
如何在D3中画棋盘?
我想在 D3 中画一个棋盘: 我对能够绘制初始游戏位置(如上)感到满意. 可能不需要国王、王后、骑士等的图像文件(有 12 个不同的部分)，因为它们都是 Unicode 作为代码点 2654-265F: Unicode 字符出现在任何现代浏览器中: ♔♕♖♗♘♙ ♚♛♜♝♞♟ 维基百科上的 Unicode 国际象棋符号:这里 使用 Unicode 字符在终
..
d3 圆标题工具提示文本的换行符
我正在使用 d3 的 svg，当圆标题的 tooltipText 为“line1\nline2"时，该行不会分成 2，而只是显示原始文本“line1\nline2". 尝试在工具提示中添加换行符和使用d3.js时可以在文本中插入换行符吗?，但不工作 有没有办法让它显示 2 行而不是 1 行原始文本? 即\n 被解释了.我认为更改后端响应无济于事，因为这是表示层的错误. 非常
..
将 json 中的文本分成几行以在 D3 强制布局中显示标签
我对 d3.js 和一般的编码不熟悉.这是我的问题: 我正在尝试找到一种方法来打破行中强制布局对象的长显示名称. 我希望能够确定在哪里打破这些行，我猜这是可以从 json 文件中完成的事情. 我知道已经有人问过类似的问题，但我就是找不到代码放在哪里，或者为什么我之前的尝试没有成功.这是我拥有的代码: var 宽度 = 960，高度 = 800,根;var force = d3.
..
NVD3散点图圆半径
我想知道如何在 NVD3 散点图中设置圆圈的最小和最大半径. NVD3 散点:http://nvd3.org/ghpages/scatter.html 解决方案 在您的图表对象上调用 .sizeRange([minArea, maxArea]).请注意，“大小"与面积成正比，而不是与半径成正比，因此您需要使用最大/最小半径的平方(如果要精确，则需要调整 pi/2).
..
使用 D3 附加到 SVG 的元素没有出现
我正在尝试使用 D3 显示一些简单的条形图，其中每个条形都是一个 div，但没有显示任何内容. var chartData = [4, 8, 15, 16, 23, 42];var body = d3.select('body');var svg = body.append('svg').attr("宽度",800).attr("高度",500);var div = svg.append('
..
未调用 AngularJS 指令
我正在尝试在 Angular 中实现 d3 指令，这很困难，因为在视觉上没有发生任何事情，并且控制台上也没有抛出任何错误. 这是我的 d3 指令: myApp.directive('d3-bars', ['d3Service', function($window, d3Service) {返回 {限制:'EA'，范围: {}，链接:功能(范围，元素，属性){//下面有更多代码.... 这
..
如何将两个父节点连接到一个子节点以及如何务实地为树中的每个节点制作工具提示?在 D3 js (SVG)
我制作了一个树形图结构，它工作得非常好.但现在我想做一个小小的改变却无法做出改变.我想将两个父节点连接到一个子节点......我还试图务实地向每个节点添加一个工具提示. 例如——如果你运行代码，你会更清楚地看到它.我想制作 Hanna 的子节点并标记它将连接到名为“Eric"的子节点. 知道如何实现这一目标吗? var svg = d3.select("body").append
..
d3 获得波段尺度的反转值
我正在使用 d3 编写甘特图 我有 xScale 和 Time Scale(Time) this.xScale = d3.scaleTime().domain([this.startDate,this.endDate]).range([0,this.getWidth()]); 和 yScale 作为波段尺度(资源) this.yScale = d3.scaleBand().domain
..
SVG 呈现但仅在 Firefox 中被切断 - 为什么?
我正在使用使用 SVG 的 d3js 创建图表.在 www.uscfstats.com/deltas 上查看它(使用 12842311 作为输入值；现在它非常被黑客攻击). 在 Chrome、Safari 和 Firefox 10 上，这按预期呈现了一个完整的图表，占据了整个白框.然而，在更高版本的 Firefox 上(特别是 15)SVG 渲染的前 200 像素左右，但其余部分被截断.
..
D3 从元素获取属性
我正在尝试一些基本的 d3，我一直在尝试使用 d3 获取每个 rect 的属性，但我什么也得不到. 当我尝试 d3.selectAll("rect") 时，我得到 如何通过使用类似 d3.selectAll("rect").select("part1").attr(...)rect 的属性/code> 或类似的东西?我想访问所有 rect 的不同属性. 解决方案 您可以使用 g
..