SVG简单绘图工具

我有一个在线SVG格式的图案集合。 grid.kevinbock.de SVG简单绘图工具

现在我想稍后即会冷静地画到网上，并至少与SVG一些“的onclick =补”的东西填区...

我无法找到正是这种和教程想知道如果ü可以帮助我如何建立这个代码...

继承人SVG格式的网格的例子：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="50%" 
viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" enable-background="new 0 0 800 600" xml:space="preserve"> 

<polygon fill="none" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" points="653.458,599.182 653.458,585.273 
665.501,592.229 677.546,599.182 665.501,606.135 653.458,613.09 "/> 
<polygon fill="none" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" points="653.458,571.367 653.458,557.461 
665.501,564.414 677.546,571.367 665.501,578.32 653.458,585.273 "/> 
<polygon fill="none" stroke="#000000" stroke-width="0.25" stroke-miterlimit="10" points="653.458,543.553 653.458,529.646 
665.501,536.602 677.546,543.553 665.501,550.508 653.458,557.461 "/> 

... and so on... 
</svg>

进一步的问题是：没有任何可能性在网格中绘制线条时可以得到像捕捉的东西？附近的矢量点？有没有办法插入“后退/撤消”按钮并保存文件？

来源

2013-05-26 Solano

你应该减少你的例子中的代码行数。没有任何额外的意义，这太过分了。 – stefan

是的，你说得对。 – Solano

为了表明您只需在您的html代码中使用<svg>标记。要操纵svg，您可以使用javascript。您可以像处理常规的DOM文档那样操作SVG图形。例如：

<html> 
    <script> 
    function colorChange() 
    { 
     var el = document.getElementById("mycircle"); 
     el.style.fill = "blue"; 
    } 
    </script> 
    <svg> 
    <circle onClick="colorChange();" id="mycircle" cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
    </svg> 
</html>

看到这个jsfiddle看到它的行动。

来源

2013-05-26 12:29:47

非常感谢！现在我明白这个机制了！有没有办法切换颜色？和svg中的很多小对象怎么样，我必须打电话给他们中的任何人做什么onclick？ – Solano

我试过这个：但无法得到它的工作 http://jsfiddle.net/C6yYa/ – Solano

我不能填写任何ID =“Ebene_1”... – Solano

SVG简单绘图工具

回答

相关问题