Skip to content

[SVG] raw defs is not working but defs! works #589

Closed
@fxdave

Description

@fxdave

Works:

        svg![
            C!["viewport__svg"],
            defs![
                pattern![
                    attrs! {
                       At::Id => "smallGrid",
                       At::Width => "8",
                       At::Height => "8",
                       At::PatternUnits => "userSpaceOnUse",
                    },
                    path![attrs! {
                        At::D => "M 8 0 H 0 V 8"
                        At::Stroke => "lightgray"
                        At::StrokeWidth => "0.5"
                        At::Fill => "none"
                    }]
                ],
                pattern![
                    attrs! {
                       At::Id => "largeGrid",
                       At::Width => "80",
                       At::Height => "80",
                       At::PatternUnits => "userSpaceOnUse",
                    },
                    rect![attrs! {
                        At::Width => "80",
                        At::Height => "80",
                        At::Fill => "url(#smallGrid)"
                    }]
                ]
            ],
            g![
                g![
                    attrs! {
                        At::Width => "100%",
                        At::Height => "100%"
                    },
                    rect![attrs! {
                        At::Width => "100%",
                        At::Height => "100%",
                        At::Fill => "url(#largeGrid)",
                    }]
                ],
                rect![attrs! {
                    At::X => "100",
                    At::Y => "100",
                    At::Fill => "red",
                    At::Width => "100",
                    At::Height => "100"
                }]
            ]
        ]

Doesn't work:

Rendered with white background instead of the pattern

        svg![
            C!["viewport__svg"],
            defs![raw!(
                r#"
                <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
                    <path id="smallGridPath" d="M 8 0 H 0 V 8" fill="none" stroke="lightgray" strokeWidth="0.5" />
                </pattern>
                <pattern id="largeGrid" width="80" height="80" patternUnits="userSpaceOnUse">
                    <rect id="largeGridRect" width="80" height="80" fill="url(#smallGrid)" />
                </pattern>
                <g id="shape">
                    <rect x="40" y="40" width="40" height="40" />
                </g>
               "#
            )],
            g![
                g![
                    attrs! {
                        At::Width => "100%",
                        At::Height => "100%"
                    },
                    rect![attrs! {
                        At::Width => "100%",
                        At::Height => "100%",
                        At::Fill => "url(#largeGrid)",
                    }]
                ],
                rect![attrs! {
                    At::X => "100",
                    At::Y => "100",
                    At::Fill => "red",
                    At::Width => "100",
                    At::Height => "100"
                }]
            ]
        ]

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions