Tag: svg

使用D3更新SVG元素Z索引: 使用D3库将SVG元素置于z顺序的顶部是一种有效的方法？我的具体情况是一个饼图，它突出显示（通过添加一个stroke到path ），当鼠标在给定的一块。生成我的图表的代码块如下： svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); }) .attr("stroke", "#fff") .attr("stroke-width", 0) .on("mouseover", function(d) { d3.select(this) .attr("stroke-width", 2) .classed("top", true); //.style("z-index", 1); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke-width", 0) .classed("top", false); //.style("z-index", -1); }); 我已经尝试了几个选项，但目前还没有运气。使用style("z-index")和调用classed都没有工作。在我的CSS中，“top”类定义如下： .top { fill: red; z-index: 100; } fill声明在那里，以确保我知道它正确地打开/closures。它是。 […]

在d3中旋转x轴文本: 我是新来的d3和svg编码，我正在寻找一种方法来旋转图表的xAxis文本。我的问题是，通常xAxis标题比条形图中的条宽。所以我正在寻找旋转文本垂直运行（而不是水平）在xAxis之下。我试着添加transform属性：.attr（“transform”，“rotate（180）”）但是当我这样做的时候，文字就完全消失了。我试图增加svgcanvas的高度，但仍然无法查看文本。对我在做什么错的任何想法都会很棒。我是否还需要调整x和y的位置？而且，如果是这样，多less（当我在Firebug中看到它时很难排除故障）。

如何在SVG矩形中放置和居中文本: 我有以下矩形… <rect x="0px" y="0px" width="60px" height="20px"/> 我想把“小说”一词置于其中。对于其他矩形，是否保留在其中的svg文字？我似乎无法find任何具体的内容插入在水平和垂直居中的形状和文字换行的文字。此外，文字不能离开矩形。查看http://www.w3.org/TR/SVG/text.html#TextElement示例没有帮助，因为文本元素的x和y不同于矩形的x和y。文字元素似乎没有宽度和高度。我不确定这里的math。（我的HTML表只是不会工作。）

在Android上使用SVG图标的最佳做法是什么？: 我即将创build我的第一个Android 本地（所以不是基于浏览器的）应用程序，并寻找一些关于图标创build/供应的良好做法。由于它应该支持多种设备/分辨率，我认为最好使用SVG来创build它们。至less有这个lib： http ： //code.google.com/p/svg-android/ ，它承诺在Android上提供对SVG的支持。到目前为止，我还没有find描述这个或另一个库的用法的资源作为在设备上呈现SVG图标的手段，所以我有点不情愿使用它。到目前为止，我所见过的最好的方法是使用SVG作为以不同分辨率预渲染基于PNG的图标的源格式。所以我的问题是：SVG图标是不使用PNG预渲染步骤直接在设备上使用的好select（它是否工作），以及为什么没有人使用这种方法？

文本和组节点的dojox.gfx边界框: dojo中的getBoundingBox（）的文档说：返回形状的边界框。文字形状是一个基于点的对象，所以它没有定义一个边界框。我不明白。为web的vectorgraphics的任何理智的实现包括文本对象的边框（raphaelJS和jQuery的SVG）！这里，“基于点的对象”是什么意思？我没有发现Group对象的边界框的引用，但是当使用最新的Dojo版本时， getBoundingbox对Groups也返回null 我可以很容易地为矩形自己做边界框，但唯一真正有问题的形状我需要边界框是组和文本。我结束了hotdojo dojo： dojox.gfx.Text.prototype.getBoundingBox = function() { return this.rawNode.getBBox();}); dojox.gfx.Group.prototype.getBoundingBox = function() { return this.rawNode.getBBox();}); 这当然只适用于SVG输出前端。但我想知道，我错过了什么？有没有更好的方法来做到这一点？

如何在SVG中设置转换原点: 我需要调整和旋转使用JavaScript的SVG文档中的某些元素。问题是，默认情况下，它始终应用围绕原点(0, 0) – 左上angular的变换。我怎样才能重新定义这个变换锚点？我尝试使用transform-origin属性，但不影响任何内容。这是我做到的： svg.getDocumentById('someId').setAttribute('transform-origin', '75 240'); 虽然我可以在Firefox中看到该属性是正确设置的，但似乎没有将关键点设置为我指定的点。我尝试了中center bottom和50% 100% ，不加括号。到目前为止没有工作。谁能帮忙？

如何在SVG形状的某些边上设置描边宽度：1: 在SVG的<rect>元素上设置描边宽度：1会在<rect>每一边放置一个描边。如何在SVG矩形的三边放置笔触宽度？

将SVGembedded到ReactJS中: 是否可以将SVG标记embeddedReactJS组件？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln … </span> ); } 结果在错误中：名称空间属性不受支持。 ReactJSX不是XML。这样做的最轻的方法是什么？使用像React ART这样的东西对于我正在尝试做的事来说是过度的。

创build闪电devise（如Flash）: 我正尝试在CSS中重新创buildFlash（DC漫画）（或者Big Bang Theory的Sheldon Cooper穿的T恤）的闪电符号。这将会像星级评级系统一样，只是一个“闪电评级系统”而已。但是，因为我试图保持HTML到最低限度，我想只在CSS样式。我已经到了： html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); } .wrap { height: 50vw; width: 50vw; position: relative; margin: 0 auto; } .circ:hover{ background:gray; } .circ:hover .bolt{ background:gold; } .circ { height: 50%; width: 50%; background: […]

SVG到Android形状: 我想知道如何在Android的vector绘图与Shape类可能类似于另一个vector绘图标准。由于Shape是可Drawable ，Drawable通常被定义为XML，这听起来很像SVG中的vector绘制命令。我的问题是：是否有人创build了一个XSLT转换或其他机制，用于将SVGgraphics描述转换为Android形状？