Tag: svg

在SVG中alignment文本: 我正在尝试使用混合的行和简短的文本片段（通常是两个或三个字）来制作SVG XML文档。我遇到的主要问题是让文本与线段alignment。对于水平alignment，我可以使用left ， middle或right text-anchor 。我无法find垂直alignment的等价物; alignment-baseline似乎没有做到这一点，所以目前我使用dy="0.5ex"作为中心alignmentdy="0.5ex" 。有没有正确的方式与文字的垂直中心或顶部alignment？

SVG和HTML5 Canvas有什么区别？: SVG和HTML5 Canvas有什么区别？他们两人似乎对我也一样。基本上，他们都使用坐标点绘制vector图稿。我错过了什么？ SVG和HTML5 Canvas之间的主要区别是什么？为什么我应该select一个呢？

使用Javascript创buildSVGgraphics？: 我怎样才能创build使用Javascript的SVGgraphics？所有的浏览器都支持SVG吗？

圆形加载animation: 我正在尝试创buildApple的OS X圈子加载animation。我到目前为止所尝试的： .animation-wrapper { width: 200px; height: 200px; border: 1px solid black; border-radius: 50%; position: relative; overflow: hidden; filter: brightness(0.8); -webkit-filter: brightness(0.8); } .pie-piece1 { position: absolute; width: 50%; height: 50%; bottom: 0; left: 0; background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%); } .pie-piece2 { position: absolute; width: […]

修复了SVG中的行程宽度: 我希望能够将SVG元素的笔划宽度设置为“像素感知”，即不pipe当前的缩放转换如何，总是为1px宽。我知道，这可能是不可能的，因为SVG的整个点是像素独立的。情况如下：我有一个SVG元素的viewBox和preserveAspectRatio属性设置。看起来像这样 <svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > </svg> 这意味着，当我缩放这个元素时，其内部的实际形状会相应地缩放（到目前为止这么好）。正如你所看到的，我已经设置了viewBox，使得原点位于中心。我想在这个元素中画出一个x轴和一个y轴，我这样做： <line x1="-1000" x2="1000" y1="0" y2="0" /> 再次，这工作正常。理想情况下，这个轴总是只有1px宽。当我缩放父svg元素时，我对轴越来越不感兴趣。所以我拧了？

如何在JavaScript内换行svg文本？: 所以这里是我所拥有的： <path class="…" onmousemove="show_tooltip(event,'very long text \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="…"/> <rect class="tooltip_bg" id="tooltip_bg" … /> <text class="tooltip" id="tooltip" …>Tooltip</text> <script> <![CDATA[ function show_tooltip(e,text) { var tt = document.getElementById('tooltip'); var bg = document.getElementById('tooltip_bg'); // set position … tt.textContent=text; bg.setAttribute('width',tt.getBBox().width+10); bg.setAttribute('height',tt.getBBox().height+6); // set visibility … } … 现在我很长的工具提示文本没有linebreak，即使如果我使用alert（）; 它显示了文本实际上有两行。（它包含一个“\”，但是我怎样才能删除那个呢？）我无法让CDATA在任何地方工作。

如何在svg元素中使用z-index？: 我在这个项目中使用svg圈子， <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <g id="two"> <circle fill="orange" cx="100" cy="95" r="20" /> </g> </g> </svg> 我在'g'标签中使用z-index来显示元素第一。在我的项目中，我只需要使用z-index值，但我不能使用z-index到我的svg元素。我GOOGLE了很多，但我没有find任何相对的东西。所以请帮我在我的svg中使用z-index。这是DEMO。

SVG获取文本元素的宽度: 我正在为SVG文件处理一些ECMAScript / JavaScript，并需要获取text元素的width和height ，以便可以调整围绕它的矩形的大小。在HTML中，我可以使用元素上的offsetWidth和offsetHeight属性，但看起来这些属性是不可用的。这是我需要处理的一个片段。我需要改变矩形的宽度，每当我改变文字，但我不知道如何获得text元素的实际width （以像素为单位）。 <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> 有任何想法吗？

SVG根元素的默认背景颜色: 我想为整个SVG文档设置一个默认的背景颜色，例如红色。 <svg viewBox="0 0 500 600" style="background: red">/* content */</svg> 上面的解决scheme工作，但不幸的是风格属性的背景属性不是一个标准的： http : //www.w3.org/TR/SVG/styling.html#SVGStylingProperties ，所以它在清理过程中被删除与SVG清洁器。有没有另外一种方法来声明这种背景颜色？