svg-edit | 易学教程

Empty and non-clickable filling of SVG paths in SVG-edit

阅读更多关于 Empty and non-clickable filling of SVG paths in SVG-edit

问题 I am doing a modiciation of SVG-edit which is an online SVG-editor: https://code.google.com/p/svg-edit/ I allow my users to draw shapes only with fillings set to "none". However now i want when my users draw these shapes, to allow them to hover over the shapes and display some information about them. When the shapes are "behind" some other shapes, althought they are visible because the filling is set to none, they are unclickable because the filling of the top shape is practically there but

How to apply transform matrix to path coordinates in Raphael JS 2?

阅读更多关于 How to apply transform matrix to path coordinates in Raphael JS 2?

问题 I want to apply or 'bake' a transformation of several paths in Raphael JS 2, so that I can then combine them into one single path. Here is an example path, where I would like the "transform" attribute to be applied to all the "d" coordinates. <path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135

Embedding SVG edit as a inline editor

阅读更多关于 Embedding SVG edit as a inline editor

问题 How can this be accomplished in a HTML page: Click on the SVG image will open SVG editor in another window. On closing the window (after Y/N prompt) the svg code in the opener window will be updated. 回答1: Well I found a solution: having opened the editor with hWinEdit=window.open('svg-edit-2.7/svg-editor.html','SVG-edit'); I then add the onbeforeunload event: hWinEdit.onbeforeunload=function(){hWinEdit.opener.svgClose();}; where svgClose is my function getting the SVG HTML string: s=hWinEdit

Positioning a transformed SVG element within an svg-canvas

阅读更多关于 Positioning a transformed SVG element within an svg-canvas

问题 I have written a function that will resize an SVG path, or any shape. However when i use it the path does gets resized but unfortunatetly it also changes position within my svg-canvas. this is my function function output() { var transformw=prompt("Enter your new width"); var transformh=prompt("Enter your new height"); var lastw = svg_1.getBoundingClientRect().width; var lasth = svg_1.getBoundingClientRect().height; newW=transformw/lastw; newH=transformh/lasth; alert(newH); alert(newW);

Get the bounding box of a selected SVG element

阅读更多关于 Get the bounding box of a selected SVG element

问题 I want to read: width , height , x , y measurements for a particular SVG element. I suppose that easiest way to go about this is to fetch the minimum bounding box first and read it's properties. How can I access this? 回答1: Assuming you have a handle to the element, I would think that this would work, no? box = svgedit.utilities.getBBox(selected); 回答2: If you have a reference to the DOM node, use svgNode.getBoundingClientRect() https://developer.mozilla.org/en-US/docs/DOM/element

Get the bounding box of a selected SVG element

阅读更多关于 Get the bounding box of a selected SVG element

I want to read: width , height , x , y measurements for a particular SVG element. I suppose that easiest way to go about this is to fetch the minimum bounding box first and read it's properties. How can I access this? Assuming you have a handle to the element, I would think that this would work, no? box = svgedit.utilities.getBBox(selected); If you have a reference to the DOM node, use svgNode.getBoundingClientRect() https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect Edit: SVG Edit has a method to return currently selected elements: svgCanvas.getSelectedElems() so in

How to apply transform matrix to path coordinates in Raphael JS 2?

阅读更多关于 How to apply transform matrix to path coordinates in Raphael JS 2?

I want to apply or 'bake' a transformation of several paths in Raphael JS 2, so that I can then combine them into one single path. Here is an example path, where I would like the "transform" attribute to be applied to all the "d" coordinates. <path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,