使用Javascript创建SVG图形？

作者: 5678
发布时间: 2024-04-25 10:33:09 (22天前)
转自：

10 条回复

0#
回复此人
Charizard | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我发现没有编译答案，所以创建圈子并添加到svg试试这个： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> var svgns = "http://www.w3.org/2000/svg"; var svg = document.getElementById('svg'); var shape = document.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svg.appendChild(shape); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <svg id="svg" width="100" height="100"></svg> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有一个jQuery插件，允许您通过Javascript操纵SVG： </p> <P> <a href="http://plugins.jquery.com/project/svg" rel="nofollow noreferrer"> http://plugins.jquery.com/project/svg </A> </p> <P> 从它的介绍： </p> <BLOCKQUOTE> <P> 在Firefox，Opera，原生支持，和Safari以及通过Adobe SVG IE浏览器中的查看器或Renesis播放器，SVG 让你在你的内容中显示图形网页。现在你可以轻松驾驶来自JavaScript的SVG画布码。 </p> </BLOCKQUOTE> </DIV>

编辑
2#
回复此人
是吗@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> IE 9现在支持基本的SVG 1.1。这是时候了，虽然IE9仍远远落后于谷歌Chrome和Firefox SVG的支持。 </p> <P> <a href="http://msdn.microsoft.com/en-us/ie/hh410107.aspx" rel="nofollow"> http://msdn.microsoft.com/en-us/ie/hh410107.aspx </A> </p> </DIV>

编辑
3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 不是并非所有浏览器都支持SVG。我相信IE需要一个插件才能使用它们。由于svg只是一个xml文档，JavaScript可以创建它们。我不确定是否将它加载到浏览器中。我没试过。 </p> <P> 此链接包含有关javascript和svg的信息： </p> <P> <a href="http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm" rel="nofollow noreferrer"> http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm </A> </p> </DIV>

编辑
4#
回复此人
记忆只剩空城 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 因此，如果你想在JS中逐个构建你的SVG东西，那就不要只使用了 <code> createElement() </code> ，那些不会画，改为使用它： </p> <pre> <code> var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle"); </code> </pre> </DIV>

编辑
5#
回复此人
一腔诗意喂了狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 除IE之外的所有现代浏览器都支持SVG </p> <P> 这是一个教程，提供有关如何使用javascript使用SVG的分步指南： </p> <BLOCKQUOTE> <P> <a href =“http://blazingcloud.net/2010/09/17/svg-scripting-with-javascript-part-1-simple-circle/”rel =“nofollow noreferrer”title =“SVG使用JavaScript编写脚本1：简单圆圈“> 使用JavaScript的SVG脚本第1部分：简单的循环 </A> </p> </BLOCKQUOTE> <P> 喜欢 <a href="https://stackoverflow.com/questions/1034712/creating-svg-graphics-using-javascript/1040307#1040307"> Boldewyn </A> 如果你想要已经说过了 </p> <BLOCKQUOTE> <P> 为了跨浏览器，我强烈推荐RaphaelJS： <a href="http://raphaeljs.com" rel="nofollow noreferrer"> rapaheljs.com </A> </p> </BLOCKQUOTE> <P> 虽然现在我觉得图书馆的大小太大了。它有许多很棒的功能，其中一些你可能不需要。 </p> </DIV>

编辑
6#
回复此人
！啊啊 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我喜欢 <a href="http://keith-wood.name/svg.html" rel="noreferrer"> 的<strong> jQuery SVG </强> </A> 图书馆非常多。每次我需要使用SVG操作时它都会帮助我。它真正促进了使用JavaScript的SVG工作。 </p> </DIV>

编辑
7#
回复此人
别闹 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用Javascript的SVG图形上有多个库：Snap，Raphael，D3。或者您可以使用普通的javascript直接连接SVG。 </p> <P> 目前，所有最新版本的浏览器都支持SVG v1.1。 SVG v2.0正处于工作草案中，使用起来还为时过早。 </p> <P> 本文介绍如何使用Javascript与SVG交互，并引用了浏览器支持的链接。 <a href="http://tumba.solutions/blog/svg" rel="nofollow"> 与SVG连接 </A> </p> </DIV>

编辑
8#
回复此人
哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为了实现跨浏览器，我强烈建议 <a href="http://dmitrybaranovskiy.github.io/raphael" rel="nofollow noreferrer"> RaphaelJS </A> 。它有一个很好的API和IE中的VML，它无法理解SVG。 </p> </DIV>

编辑

登录后才能参与评论