How can I implement eraser function in SVG?

Question

I think SVG is better than HTML5 canvas for some features, but I can't imagine an easy way to make eraser function. I there any way or any example?

Answer 1

This is a really janky way of doing it, but you could simply mimic your standard pen tool with a white stroke.

Answer 2

After looking at many examples (including Geert Bellemans answer here), I finally came up with this code that works. To use the Eraser, you draw new circles and append them inside the node. To draw new lines/shapes, you append them inside the node. Here it is:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="638px">      

    <mask id="mask_1">
        <rect width="100%" height="100%" fill="#fff"></rect>
        <circle cx="223" cy="122" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle>
        <circle cx="222" cy="124" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle>
        <circle cx="221" cy="125" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle>
        <circle cx="220" cy="126" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle>
        <circle cx="220" cy="127" r="8" stroke="#000" stroke-width="0px" fill="#000"></circle>
    </mask>
    <g mask="url(#mask_1)">
        <polyline fill="none" points=" 210,149 212,148 213,144 215,142 216,139 219,135 220,133 224,128 226,126 229,121 233,117 237,112 243,107 248,103 253,99 258,96 263,92 268,90 271,88 272,87 273,87 274,87 275,86 275,85 276,85 277,85 278,85 279,85 280,84 " stroke="#ff0000" stroke-width="4"></polyline>
    </g>
</svg>