2013-05-26 4 views
0

У меня есть коллекция шаблонов в формате SVG онлайн. grid.kevinbock.deSVG простой инструмент для рисования

теперь я думал it'll круто красить их в Интернете, и по крайней мере заполнения областей с некоторыми «OnClick = заполнить» материал с SVG ...

я не смог найти учебник для именно это и интересно, если и может помочь мне, как настроить код для этого ...

Вот пример сетки в формате 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> 

вопросы: есть ли возможность получить что-то вроде привязки при рисовании линий в сетке? возле векторных точек? и есть ли способ вставить «назад/отменить» -Button и сохранить файл?

+0

Вы должны уменьшить количество строк кода в вашем примере. Это слишком много без какого-либо дополнительного смысла. – stefan

+0

да, ты прав. – Solano

ответ

0

Для показа вы можете просто использовать тег <svg> в своем html-коде. Чтобы управлять svg, вы можете использовать javascript. Вы можете манипулировать чертежом SVG, как обычный документ DOM. Пример:

<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, чтобы увидеть его в действии.

+0

большое спасибо! теперь я понимаю механика! Есть ли способ переключать цвета? и что относительно многих маленьких объектов в svg, нужно ли мне звонить любому из них, что делать onclick? – Solano

+0

Я пробовал: но не мог получить его работу http://jsfiddle.net/C6yYa/ – Solano

+0

Я не могу заполнить что-нибудь по ID = "Ebene_1" ... – Solano