Tag: svg

Snap.svg vs Svg.js

我试图find适合现代浏览器的正确的SVG库。 我的目标是决定，什么库适合创build简单的在线SVG编辑器与例如。 文本和path编辑和剪报文本与path。 我find了两个可能合适的库： Snap.svg和Svg.js。 SNAP.SVG Github： https ： //github.com/adobe-webplatform/Snap.svg 源代码行：6925 Github星级：3445 Doc： http ： //snapsvg.io/docs/ 入门： http : //snapsvg.io/start/ 启动器例子（ JSBIN ） var draw = Snap(800, 600); // create image var image = draw.image('http://img.dovov.comshade.jpg', 0, -150, 600, 600); // create text var text = draw.text(0,120, 'SNAP.SVG'); text.attr({ fontFamily: 'Source Sans Pro', fontSize: 120, textAnchor: […]

SVG支持Internet Explorer 8及以下版本

我在Flash中创buildanimation，并使用Swiffy将其转换为HTML5。 我认为这是使用SVG来渲染所有的; 有没有一些JavaScript或诀窍让IE8及以下的支持？ 我的animation在Internet Explorer 9中运行良好。 谢谢！

将标签放置在d3.js中的节点的中心

我从d3.js开始，尝试创build一个包含居中号码标签的节点行。 我能够在视觉上产生所需的结果，但是我所做的方式并不是最佳的，因为它涉及硬编码每个文本元素的xy坐标。 以下是代码： var svg_w = 800; var svg_h = 400; var svg = d3.select("body") .append("svg") .attr("width", svg_w) .attr("weight", svg_h); var dataset = []; for (var i = 0; i < 6; i++) { var datum = 10 + Math.round(Math.random() * 20); dataset.push(datum); } var nodes = svg.append("g") .attr("class", "nodes") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("class", […]

svg背景图像的位置始终以Internet Explorer为中心，尽pipe背景位置：左中心;

我正在使用SVG徽标作为背景图像，我似乎无法使其在Internet Explorer中正确alignment（编辑：和Safari） 。 容器看起来像这样： <div id="header"> <div id="logo"></div> </div> 随着风格： #header{ width: 100%; max-width: 1200px; height: 100%;} #logo{ background: url(..http://img.dovov.comss_logo.svg); background-position: left center; width: 100%; height: 100%; float: left;} 您可以看到<div>应该跨越其父项的100％，但在元素的左侧显示徽标。 这在Chrome和Safari中运行良好，但徽标始终位于IE中的<div id="logo">中。 信息似乎真的很难find这个，有没有其他人有同样的问题？ 下面是一个问题示例版本的链接，绿色框是SVG。

用OpenGL（和OpenGL ES）渲染SVG

我目前正在研究使用OpenGL和OpenGL ES从SVG文件渲染vectorgraphics的可能性。 我打算针对Windows和Android。 我的理想解决scheme是从一个给定的SVG文件生成一个多边形三angular剖分的最小C库。 然后这将生成标准的OpenGL或OpenGL ES调用，并在重绘时使用显示列表或vbo进行优化。 我只需绘制一个显示列表，在翻译和旋转之后绘制vector图，从而可以将其与其他OpenGL调用混合使用。 到目前为止，我看到的build议是首先使用QT或开罗。 – 这不是一个选项，因为我希望pipe理我自己的OpenGL上下文而不是臃肿的库（在我试图实现的上下文中）。 这也不适用于Android。 第二个select是使用渲染纹理的库。 虽然这对于静态vectorgraphics来说可能是好的，但对于经常出现缩放和旋转的游戏来说，这并不是一个有效或可行的select。 第三，有使用OpenVG的可能性。 OpenVG规范（ShivaVG等）的一些开源实现，但我还没有find一个能够在运行时从给定的SVG文件生成适当的OpenVG调用的库，我看不到如何优化我们不妨用显示列表或vbo。 所有三种方法都受到限制。 如果没有其他解决scheme，我认为最有希望的select是使用OpenVG实现。 所以我的问题是，有没有图书馆可以做我想要的，或者接近我想要的？ 如果没有，为什么不呢？ 试试从头开始做更好吗？

可访问性：SVG和MathML推荐的Alt-Text约定？

概观 HTML5 现在允许使用HTML文档的<svg>和<math>标记，而不依赖于外部命名空间（ 这里有相当好的概述）。 两者都有自己的alt属性类似物（见下文），今天的屏幕阅读器软件可以有效地忽略它们。 因此，盲人用户无法访问这些元素。 是否有计划为这些新元素实施标准的替代文本惯例？ 我已经搜遍了文档，干起来了！ 更进一步的细节 关于SVG： SVG的替代文本可以被认为是根title或desc标签的内容。 <svg> <title>An image title</title> <desc>This is the longer image description</desc> … </svg> 我发现一个屏幕阅读器是这样读取的，但这是标准吗？ 以前插入SVG的方法也有可访问性问题，因为<object>标签被屏幕阅读器不一致地处理。 关于MathML： MathML的替代文本应该存储在alttext属性中 。 <math alttext="A squared plus B squared equals C squared"> … </math> 由于屏幕阅读器似乎没有认识到这一点，math渲染库MathJax在运行时将文本插入到aria-label属性中。 <span aria-label="[alttext contents]">…</span> 不幸的是，NVDA，JAWS和其他人也不能可靠地阅读这些标签。 （更多关于WAI-ARIA ） 关于两方面：在大部分不受支持的ARIA属性方面缺乏成功，我尝试使用title属性。 这些“外国”HTML元素似乎也被忽略。 包起来 不仅仅是一个简单的黑客攻击，我正在寻找推荐的方法来在这些新的HTML元素上添加替代文本。 也许有一个我忽略的W3C规范？ 还是在游戏中还为时过早？

通过代码旋转网页？

我希望有一个相对简单的方法来旋转网页一点点，30度左右，同时仍然使其function齐全和可用。 我完全控制了页面，并且可以修改它，以便在需要时使这更容易。 不过，我宁愿不重写在SVG中的所有东西，但也许JavaScript和canvas将工作？ 有没有办法使用CSS，Javascript或其他一些跨浏览器的方法，让我做到这一点？

SVG图标与现代网站中的PNG图标

我想知道为什么这么less的现代网站仍然只使用PNG图标（但这个假设只是基于我的观察）。 到目前为止，我知道，使用PNG的SVG的主要原因是IE8和SVG使用更多的CPU功率（但我不认为这是简单的1K图标的任何问题）。 我可以看到（我们目前使用）使用SVG的许多优点，无论是用作精灵，图像还是内联SVG。 （问题寻找一个研究：PNG雪碧VS SVG雪碧VS图标字体侧重于性能，没有相关的答案， 图标字体与SVGcaching和networking关注焦点在networkingstream量，但它很容易通过模板解决。 如果新的网站仅支持现代浏览器，是否有任何理由不使用SVG（或者 – 是否有任何理由使用PNG的图标）？ 如果我们不关心IE8，并且通过模板化和/或caching来支持SVG的使用，那么是否有任何依赖于SVG的手段？

如何获得svg：g元素的宽度

我目前正在使用JavaScript中的svg元素。 而我对这个是新的。 我的问题是，我有一个svg元素，我有多个svg:g元素。 在我的svg:g元素中，我还有其他的svg元素。 <svg> <g class="my-class"> <g class "c1"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" y="-4"> 13 </text> </g> <g class="c2"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" y="-4"> 13 </text> </g> <g class="c3"> <text style="font-size: 9" x="0" y="-4"> john </text> <text style="font-size: 9" x="70" […]

如何在Google Maps API v3中使用SVG标记

我可以使用我的转换image.svg作为谷歌地图icon.I转换我的PNG图像为SVG，我想使用这个像谷歌地图符号，可以rotate.I已经尝试使用谷歌地图符号，但我想有像汽车，男人等图标…这就是为什么我把我的一些PNG文件转换为SVG。 就像这个例子网站，他用这些http://www.goprotravelling.com/