Questions tagged «svg»

我可以将转换后的image.svg用作Google地图图标。我正在将我的png图像转换为svg，我想使用可旋转的Google地图符号之类的符号。我已经尝试使用Google地图符号，但是我想要一个像汽车，人等的图标。这就是为什么我将一些png文件转换为svg的原因，就像这个示例网站一样，他对这些http：/ /www.goprotravelling.com/

91 google-maps  google-maps-api-3  svg 

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，该消息应被用作背景的框包围。它们应彼此完全对齐，并与矩形（顶部和中心）完全对齐。做这个的最好方式是什么？ 我尝试使用“ x”，“ y”，“ width”和“ height”属性添加svg文本，然后在svg rect之前添加。问题是文本的参考点在中间（因为我希望它居中对齐，所以我使用text-anchor: middle），但是对于矩形，它是左上角的坐标，而且我想在文本周围留一点空白，使它有点像痛苦。 另一种选择是使用html div，这会很好，因为我可以直接添加文本和填充，但是我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点？

91 javascript  svg  d3.js  tooltip 

有什么方法可以使用CSS 从背景效果中切出一个透明文本，如下图所示？ 这将是可悲的输，因为替换文本图像的所有珍贵的SEO。 我首先想到了阴影，但是我什么也搞不清... 图片是网站背景，是绝对定位的<img>标签

90 css  svg  fonts  css-shapes 

我想知道为什么这么少的现代网站仍然只使用PNG作为图标（但是这种假设只是基于我的观察）。到目前为止，我知道，在SVG上使用PNG的主要原因是IE8，并且SVG使用了更多的CPU能力（但是我不认为对于简单的1K图标来说这不是问题）。我可以看到（现在我们正在使用）使用SVG的许多优点，无论是将其用作精灵，图像还是嵌入式SVG。 （寻找研究的问题：PNG Sprite与SVG sprite与Icon字体专注于性能，而没有相关的答案，Icon Font与SVG缓存和网络相关性关注于网络流量，但是可以通过模板轻松解决。） 如果新网站仅支持现代浏览器，是否有任何理由不使用SVG（或-是否有任何理由将PNG用于图标）？如果我们不在乎IE8，并且通过模板化和/或缓存来备份SVG的使用，是否有任何陷阱可以仅依靠SVG？

90 html  svg  icons 

我想从Font Awesome字形中获取SVG路径数据，以便可以在HTML中直接将它们用作SVG。我以为这就像从fontawesome-webfont.svg复制粘贴路径数据一样容易，但是当我在HTML中使用它们时，符号都完全颠倒了。有人知道为什么吗？ （请参阅小提琴） 字体真棒SVG： <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 …

89 html  svg  font-awesome 

在HTML5中，元素可以存储在他们的名字开始与XML属性的任意元数据data-等<p data-myid="123456">。这也是SVG规范的一部分吗？ 实际上，该技术在很多地方都可以很好地适用于SVG文档。但是我想知道它是否属于官方SVG规范，因为该格式还很年轻，以至于浏览器之间仍然存在很多不兼容，尤其是在移动设备中。因此，在提交代码之前，我想知道我是否可以期望将来的浏览器能够支持此功能。 我从工作组邮件列表中发现了此消息，并表示他们“希望[他们]将支持”。这正式了吗？

87 svg  web-standards 

这是问题的说明（已在Firefox和Chrome中测试）： <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> 运行代码段Hide results展开摘要 在JSFiddle上查看 请注意蓝色下方的额外red空间。divsvg 已经尝试将padding和margin两个元素都设置为0，但是没有运气。

87 html  css  svg 

假设我有几个复合形状（<g>）。我希望能够单击并拖动它们，但是我希望当前碰巧拖动的那个按Z顺序位于另一个的TOP上，因此，如果将其拖动到另一个，则另一个应该黯然失色。

85 javascript  svg 

获取svg元素尺寸的正确方法是什么？ http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28： style x client 300x100 offset 300x100 IE 10： stylex client300x100 offsetundefinedxundefined FireFox 23： "style" "x" "client" "0x0" "offset" "undefinedxundefined" 在上有width和height属性svg1，但.width.baseVal.value仅当我在元素上设置width和height属性时才设置。 小提琴看起来像这样： 的HTML <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" /> <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> <circle cx="250" cy="50" r="40" …

85 javascript  svg 

我有以下SVG： <svg> <g> <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path> <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path> </g> </svg> 运行代码段隐藏结果展开摘要 我希望得到一个类似CSSborder-top-right-radius和border-top-bottom-radius效果。 如何实现圆角效果？

83 xml  image  svg  vector-graphics 

我搞砸了SVG，希望能在Illustrator中创建SVG文件并使用Javascript访问元素。 这是Illustrator推出的SVG文件（它似乎也向我删除的文件的开头添加了一些垃圾） <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242" xml:space="preserve"> <path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037 c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185 L34.074,86.094z"/> <path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074 l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741 l-19.259-39.259L92.593,8.316L68.148,32.761z"/> <polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 …

83 javascript  svg  raphael 

使用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; …

81 javascript  svg  d3.js 

我是d3和svg编码的新手，正在寻找一种在图表的xAxis上旋转文本的方法。我的问题是通常xAxis标题的长度超过条形图中的条形宽度。所以我想旋转文本以使其在xAxis下垂直（而不是水平）运行。 我尝试添加transform属性：.attr（“ transform”，“ rotate（180）”） 但是，当我这样做时，文本完全消失了。我曾尝试增加svg画布的高度，但仍然无法查看文本。 任何关于我做错事情的想法都很棒。我还需要调整x和y位置吗？并且，如果是这样，增加多少（当我在Firebug中看到它时很难进行故障排除）。

81 text  svg  transform  d3.js 

我正在建立一个投资组合网站。 HTML代码 <div id = "hero"> <div id = "social"> <img src = "facebook.svg"> <img src = "linkedin.svg"> <img src = "instagram.svg"> </div> </div> CSS代码（使用SASS） #hero { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 300px; #social { width: 50%; display: flex; justify-content: space-between; flex-wrap: wrap; img { width: …

81 html  css  svg  sass 

如何使用JavaScript创建SVG图形？ 所有浏览器都支持SVG吗？

80 javascript  graphics  svg