How do you make a block comment in SVG

Question

I'm trying to learn SVG for the first time but the code seems to have an issue with my block comments. I'm using:

/* This is my
 * block comment
 */

And when I run my code, I get the following error:

'return' statement outside of function
line: 116, column: 4

That so happens to be immediately before my block comment.

Wina

I just took out all of the block comments, but it's still having an issue with another line. You can find all of the code from the example here: pastie.org/private/hdaccssdbcxal8s0o81ciq It is complaining about line 47 Column 8, which doesn't exist... – Wina

As with HTML files, it is impossible to comment out anything but one or more whole elements. You can't comment out part of an SVG path, or even a single SVG object, for example. This goes way back to the origins of HTML, which were in library science and possibly in general semantics, not computer programming. Note the contrast with JavaScript and Style Sheets, both of which can contain very flexible character-based comment-out brackets. – Magdau

Answer 1

As SVG is XML, you can use XML style comments:

<!-- 
    comment 
-->

For example:

<g onclick = "setScale(1)">
    <rect id = "scale1" x = "120" y = "10" width = "30" height = "30"
        fill = "#ffc" stroke = "black"/>
    <!-- 
        this text describes middle rectangle
    -->
    <text x = "135" y = "30" text-anchor = "middle">M</text>
</g>

Or you can exclude some part of code:

<!--
     this group is disabled for testing    
<g onclick = "setScale(1)">
    <rect id = "scale1" x = "120" y = "10" width = "30" height = "30"
        fill = "#ffc" stroke = "black"/>
    <text x = "135" y = "30" text-anchor = "middle">M</text>
</g>
-->

Tancred

Note in this example that a complete "g" element has been commented out. It is impossible, however, to comment out arbitrary text. See my comment above. – Magdau

@Tancred , maybe it would be important to mention if you use inside <!-- '...' --> (double-hyphen), for example like this: <!-- ------------------ comment ------------------ --> then there is a parsing error! – Legislate

Answer 2

An svg document is much the same as an html document as far as the DOM is concerned.

This line will break in all browsers:

svgDocument = evt.getTarget().getOwnerDocument();

And could simply be replaced by:

svgDocument = document;

Actually there's no real need to create a variable svgDocument since document is always defined and referring to the current document (the svg).

Please read https://jwatt.org/svg/authoring/ and in particular https://jwatt.org/svg/authoring/#asv-getters-and-setters.

Pelota

Answer 3

You can use a xml tag as "desc".

<svg width="250" height="130" viewBox="0 0 250 130">
    <desc>Cuadrado que marca el viewport</desc>
    <rect x="0" y="0" height="130" width="250" style="stroke:#f00; fill: none; stroke-width:5;"></rect>

    <desc>line from top left corner to bottom right corner of the viewport</desc>
    <line x1="0" y1="0" x2="250" y2="130" style="stroke:#f00; stroke-width:1;"></line>
</svg>

Chrysolite

SVG desc element is indented only for accessible description and to be used inside of the described tag (unless aria-* attributes are specified): developer.mozilla.org/en-US/docs/Web/SVG/Element/desc – Narcotism