Skip to content

Unexpected page reload when clicking on a link with svg "use" element  #527

Closed
@TatriX

Description

@TatriX

Here's a demo:

a![
            style!{
                St::Display => "flex",
                St::Border => "1px solid pink",
                St::Width => px(80),
                St::Height => px(80),
                St::JustifyContent => "center",
                St::AlignItems => "center",
            },
            attrs!{
                At::Href => "/foo",
            },
            svg![
                attrs!{
                    At::Width => px(40),
                    At::Height => px(40),
                },
                r#use![attrs!{
                    At::Href => "/icons.svg#ic:outline-double-down"
                }],
            ],
        ],

Add this for example to /examples/counter/src/lib.rs

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">

  <symbol id="ic:outline-double-down" viewBox="0 0 15 14">
    <path d="M3.52051 8.75L3.52051 6.125L7.60384 9.04167L11.6872 6.125L11.6872 8.75L7.60384 11.6667L3.52051 8.75Z" fill="#B44C4C"/>
    <path d="M3.52051 4.66626L3.52051 2.04126L7.60384 4.95793L11.6872 2.04126L11.6872 4.66626L7.60384 7.58293L3.52051 4.66626Z" fill="#B44C4C"/>
  </symbol>

</svg>

and this to /examples/counter/icons.svg.
Clickling on the icon in the middle of the link will reload the page. Probably this happens because of href in ` tag.

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