-
-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
当页面同时使用多个相同图标出现 ID 冲突导致 SVG无法正常显示 #122
Comments
没法解决,所以我弃用该插件自己进行实现,基本代码如下 const instance = getCurrentInstance()!;
图标的样式
const iconStyle = computed(() => {
let style: StyleValue = {};
let transform = '';
if (props.rotate) {
transform += `rotate(${props.rotate}) `;
}
if (props.rotateX) {
transform += `rotateX(${props.rotateX}) `;
}
if (props.rotateY) {
transform += `rotateY(${props.rotateY}) `;
}
if (transform) {
style.transform = transform;
}
return style;
});
watchEffect(() => {
import(`../../assets/svg/${props.name}.svg?raw`).then(dom => {
let svgDom = dom.default
.replace(/(id=")(.*?")/gi, `$1${instance.uid}-$2`)
.replace(/(url\(#)(.*?\))/gi, `$1${instance.uid}-$2`)
.replace(/(href="#)(.*?")/gi, `$1${instance.uid}-$2`);
console.log(instance.uid);
if (iconStyle.value.transform) {
let parser = new DOMParser();
let doc = parser.parseFromString(svgDom, 'image/svg+xml');
let svg = doc.querySelector('svg')!;
svg.style.transform = iconStyle.value.transform;
iconDom.value = svg.outerHTML;
} else {
iconDom.value = svgDom;
}
});
}); |
这样封装一下
我的版本
|
你这段代码可以解决 svg 代码里用到 id,页面上重复使用图标,会出现 id 重复而无法正常显示的情况吗? |
svgo有个插件配置prefixIds,为每个id添加前缀(前缀根据文件名生成)。可以保持id的唯一 |
只能解决不同图标的问题,如果一个图标被多次引用,依旧冲突 |
I'm also facing this problem. is there any solution for this lib? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
svgo 中可以添加前缀,但只能解决使用不同图标,如果使用相同的图标依旧会有ID冲突问题。
The text was updated successfully, but these errors were encountered: