如何在 SVG 中进行块注释

发布于 2024-10-22 23:28:59 字数 235 浏览 2 评论 0原文

我第一次尝试学习 SVG,但代码似乎与我的块注释有问题。我正在使用:

/* This is my
 * block comment
 */

当我运行代码时,出现以下错误:

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

这恰好发生在我的块注释之前。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

听,心雨的声音 2024-10-29 23:29:00

由于 SVG 是 XML,因此您可以使用 XML 样式注释:

<!-- 
    comment 
-->

例如:

<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>

或者您可以排除代码的某些部分:

<!--
     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>
-->

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>
-->
空宴 2024-10-29 23:29:00

就 DOM 而言,svg 文档与 html 文档非常相似。

此行将在所有浏览器中中断:

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

并且可以简单地替换为:

svgDocument = document;

实际上没有真正需要创建变量 svgDocument 因为 document 始终被定义并引用当前文档(svg)。

请阅读https://jwatt.org/svg/authoring/,特别是https://jwatt.org/svg/authoring/#asv-getters-and-setters

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.

巨坚强 2024-10-29 23:29:00

您可以使用 xml 标签作为“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>

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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文