When I use SVG in my DOM, there is no SVG’s icon in the exported picture

[xiaoMingTongXue]

Use case: description, code

I use webpack4 packaging, using SVG's Symbol ID function
Component Definition：

<template>
	<div class="icon-wrapper" @click="onClick">
		<svg class="icon" aria-hidden="true">
			<use :xlink:href="iconName"></use>
		</svg>
	</div>
</template>

<script>
export default {
	name: "SvgIcon",
	props: {
		type: String,
	},
	computed: {
		iconName() {
			return `#${this.type}`;
		},
	},
    methods:{
        onClick(e) {
            this.$emit("click", e);
        },
    }
};
</script>

<style lang="less" scoped>
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    svg {
        display: inline-block;
        line-height: 1;
        width: 1em;
        height: 1em;
        fill: currentColor;

        &.sn-icon-spin {
            animation: loadingCircle 1s infinite linear;
        }
    }
}
</style>

Used：

<svg-icon class="icon" type="btn_behavior_downarrow"></svg-icon>

DOM display

Expected behavior

The exported picture is the same as the display on the page

Library version

3.1.6

Browsers

• "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36"

[Marc Brooks]

the href="#btn_behavior_downarrow" would be a ID reference to the current HTML page, which would never be a valid SVG. Please simplify to the static HTML+CSS that fails in a jsfiddle.

[xiaoMingTongXue]

the href="#btn_behavior_downarrow" would be a ID reference to the current HTML page, which would never be a valid SVG. Please simplify to the static HTML+CSS that fails in a jsfiddle.

Sorry, it's my mistake. This is the simplest link to show the problem. ：https://jsfiddle.net/wuxintongxue22/1hn6cbr0/1/

[Luca DeCaprio]

@cMing1997 I have the exact same issue, did you find a solution?

[xiaoMingTongXue]

@cMing1997 I have the exact same issue, did you find a solution?

No, I ended up with an actual rendered SVG and icon font instead

[fran7de]

I have the same issue. I have an Angular component that uses a use tag in an svg. In the browser I can see the image but not in the exported image.

[Maskys]

@cMing1997 my svg'icon is the same issure, did you find a solution currently?

[xiaoMingTongXue]

@cMing1997 my svg'icon is the same issure, did you find a solution currently?

It's not the perfect solution. It's just avoiding it

The solution

1. Use Font Icons instead of SVG
2. Instead of using the attributes of the SVG Link, render the entire SVG directly into the Dom