我有一个项目,在这个项目中,我将svg文件生成为一个svg.ts文件。(工具)。然后,我创建了一个app-svg组件,它处理svg映像。
svg.component.ts
export class SvgIconComponent implements OnInit {
private svgIcon: SVGElement;
_size?: { width?: number, height?: number };
_class?: string;
@Input() set size(dims: any) {
this._size = typeof dims === 'object' ? dims : JSON.parse(dims);
}
@Input() set class(name: string) {
this._class = name;
}
@Input()
set name(iconName: string) {
if (this.svgIcon) this.element.nativeElement.removeChild(this.svgIcon);
const svgData = this.iconRegistryService.getIcon(iconName);
this.svgIcon = this.svgElementFromString(svgData);
this.svgIcon.classList.add("mysvg");
this.element.nativeElement.appendChild(this.svgIcon);
}
get size() {
return this._size;
}
get class() {
return this._class;
}
constructor(private element: ElementRef, private iconRegistryService: IconRegistryService, @Optional() @Inject(DOCUMENT) private document: any) { }
private svgElementFromString(svgContent: string): SVGElement {
const div = this.document.createElement('DIV');
div.innerHTML = svgContent;
return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/2000/svg', 'path');
}
ngOnInit(): void {
const params = this.svgIcon.getAttribute('viewBox').split(' ');
const defaultWidth = params[2];
const defaultHeight = params[3];
this.size && this.size.width ? this.svgIcon.style.width = this.size.width + 'px' : this.svgIcon.style.width = defaultWidth + 'px';
this.size && this.size.height ? this.svgIcon.style.height = this.size.height + 'px' : this.svgIcon.style.height = defaultHeight + 'px';;
if (this.class) this.svgIcon.classList.add(this.class);
}
}当我从生成的文件导入图像时
svg-icons.ts
export const myIconMessageBlue: {
name: 'message_blue';
data: string;
} = {
name: 'message_blue',
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释
* data: `<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g clip-path="url(#clip0)"><path d="M147.033 44.995c-6.55-16.666-26.726-26.661-43.815-20.047-19.507 7.55-13.039 38.576-30.757 44.85-9.57 3.39-23.72-9.27-33.39-11.212-17.818-3.577-33.949 8.996-37.92 26.407-4.053 17.762 2.446 41.487 21.962 46.308 23.247 5.743 35.357-15.155 54.858-21.156 20.013-6.157 42.265 8.386 58.833-9.309 12.24-13.073 16.715-39.337 10.229-55.84z" fill="#75828A"/><path opacity=".1" d="M139.701 52.322c0-11.572-9.38-20.952-20.952-20.952-8.965 0-16.611 5.632-19.602 13.55H23.383a5.86 5.86 0 00-5.86 5.859v64.866a5.86 5.86 0 005.86 5.859h103.235a5.859 5.859 0 005.859-5.859V68.143c4.423-3.842 7.224-9.502 7.224-15.821z" fill="#2626BC"/><path d="M126.618 114.181H23.383a5.86 5.86 0 01-5.86-5.86V43.455a5.86 5.86 0 015.86-5.86h103.235a5.859 5.859 0 015.859 5.86v64.866a5.86 5.86 0 01-5.859 5.86z" fill="#fff"/><path d="M132.478 43.456v24.756a20.877 20.877 0 01-13.729 5.124c-11.572 0-20.953-9.38-20.953-20.95 0-5.772 2.335-11.001 6.111-14.79h22.711a5.86 5.86 0 015.86 5.86z" fill="#DEE6ED"/><path d="M132.478 43.457v7.386l-52.123 40.04A8.835 8.835 0 0175 92.703a8.835 8.835 0 01-5.356-1.82l-52.122-40.04v-7.386a5.86 5.86 0 015.86-5.86h103.236a5.86 5.86 0 015.86 5.86z" fill="#DEE6ED"/><path d="M76.785 65.54l55.692 42.781a5.859 5.859 0 01-5.859 5.859H23.383a5.86 5.86 0 01-5.86-5.859L73.216 65.54a2.93 2.93 0 013.57 0z" fill="#DEE6ED"/><path d="M95.065 79.582l-14.71 11.3A8.835 8.835 0 0175 92.702a8.835 8.835 0 01-5.356-1.82l-14.71-11.3 18.282-14.041a2.928 2.928 0 013.568 0l18.281 14.041z" fill="#CED7DE"/><path d="M73.216 86.236l-55.693-42.78a5.86 5.86 0 015.86-5.86h103.235a5.859 5.859 0 015.859 5.86l-55.692 42.78a2.93 2.93 0 01-3.57 0z" fill="#fff"/><path d="M108.676 106.384h-9.414a1.465 1.465 0 01-1.465-1.465v-6.49c0-.81.656-1.465 1.465-1.465h9.414c.809 0 1.465.656 1.465 1.465v6.49c0 .809-.656 1.465-1.465 1.465z" fill="#219653"/><path d="M91.368 100.413h-8.154a1.465 1.465 0 010-2.93h8.154a1.465 1.465 0 010 2.93zM91.368 106.384H62.706a1.465 1.465 0 010-2.929h28.662a1.465 1.465 0 110 2.929z" fill="#4A5258"/><path d="M118.749 65.95c11.572 0 20.952-9.38 20.952-20.952 0-11.572-9.38-20.953-20.952-20.953-11.571 0-20.952 9.381-20.952 20.953 0 11.571 9.381 20.952 20.952 20.952z" fill="#fff"/><path d="M118.749 67.415c12.361 0 22.417-10.056 22.417-22.417 0-12.361-10.056-22.417-22.417-22.417-12.361 0-22.417 10.056-22.417 22.417 0 7.19 3.407 13.596 8.687 17.701L75.892 85.074a1.466 1.466 0 01-1.784 0l-55.067-42.3a4.402 4.402 0 014.341-3.714H90.58a1.465 1.465 0 000-2.93H23.383c-4.039 0-7.324 3.286-7.324 7.325v64.866c0 4.038 3.285 7.324 7.324 7.324h103.235c4.038 0 7.324-3.286 7.324-7.324V69.608a1.465 1.465 0 00-2.93 0v35.74L92.66 75.888l14.924-11.464a22.27 22.27 0 0011.165 2.99zm-61.41 8.473l-38.35 29.46v-58.92l38.35 29.46zm73.615 33.11a4.397 4.397 0 01-4.337 3.717H23.383a4.397 4.397 0 01-4.337-3.717l40.699-31.263 12.578 9.662a4.39 4.39 0 002.677.908c.945 0 1.89-.302 2.677-.908l12.579-9.662 40.698 31.263zm-31.692-64c0-10.746 8.742-19.488 19.487-19.488 10.746 0 19.488 8.742 19.488 19.488 0 10.745-8.742 19.487-19.488 19.487-10.745 0-19.487-8.742-19.487-19.487z" fill="url(#paint0_linear)"/><path d="M109.604 37.852l2.99 7.145-2.99 7.145c-.508 1.214.717 2.43 1.927 1.913l18.052-7.71c1.186-.507 1.186-2.188 0-2.695l-18.052-7.71c-1.21-.517-2.435.699-1.927 1.912z" fill="url(#paint1_linear)"/><path d="M119.414 46.365l-9.001 3.846 2.18-5.214-2.183-5.215 9.004 3.846c1.123.48 1.123 2.26 0 2.737z" fill="#82CAFD"/><path d="M96.922 23.927a4.234 4.234 0 01-3.004-1.242 4.253 4.253 0 010-6.008 4.253 4.253 0 016.007 0 4.252 4.252 0 010 6.008 4.234 4.234 0 01-3.003 1.242zm0-5.564a1.32 1.32 0 00-.932 2.25 1.32 1.32 0 001.864 0 1.32 1.32 0 00-.932-2.25z" fill="url(#paint2_linear)"/><path d="M64.025 134.564a4.235 4.235 0 01-3.003-1.242 4.253 4.253 0 010-6.008 4.253 4.253 0 016.007 0 4.253 4.253 0 010 6.008 4.235 4.235 0 01-3.004 1.242zm0-5.564a1.32 1.32 0 10.932 2.25 1.32 1.32 0 00-.932-2.25z" fill="#219653"/><path d="M86.361 27.7a1.46 1.46 0 01-1.035-.43l-1.748-1.747-1.748 1.747a1.465 1.465 0 01-2.07-2.071l2.782-2.783a1.465 1.465 0 012.072 0l2.783 2.783a1.465 1.465 0 01-1.036 2.5zM128.832 129a1.46 1.46 0 01-1.036-.429l-1.747-1.747-1.748 1.747a1.464 1.464 0 11-2.071-2.072l2.783-2.783a1.464 1.464 0 012.071 0l2.784 2.783a1.465 1.465 0 01-1.036 2.501z" fill="#fff"/><path d="M52.407 130.392a1.46 1.46 0 01-1.035-.429l-1.748-1.747-1.748 1.747a1.465 1.465 0 01-2.07-2.071l2.782-2.783a1.465 1.465 0 012.072 0l2.783 2.783a1.464 1.464 0 01-1.036 2.5z" fill="url(#paint3_linear)"/></g><defs><linearGradient id="paint0_linear" x1="38.174" y1="76.516" x2="133.191" y2="63.252" gradientUnits="userSpaceOnUse"><stop stop-color="#4DB5FE"/><stop offset="1" stop-color="#43A9F0"/></linearGradient><linearGradient id="paint1_linear" x1="113.196" y1="46.458" x2="129.22" y2="44.556" gradientUnits="userSpaceOnUse"><stop stop-color="#4DB5FE"/><stop offset="1" stop-color="#43A9F0"/></linearGradient><linearGradient id="paint2_linear" x1="94.177" y1="20.357" x2="100.682" y2="19.681" gradientUnits="userSpaceOnUse"><stop stop-color="#4DB5FE"/><stop offset="1" stop-color="#43A9F0"/></linearGradient><linearGradient id="paint3_linear" x1="46.878" y1="127.99" x2="53.303" y2="126.998" gradientUnits="userSpaceOnUse"><stop stop-color="#4DB5FE"/><stop offset="1" stop-color="#43A9F0"/></linearGradient><clipPath id="clip0"><path fill="#fff" d="M0 0h150v150H0z"/></clipPath></defs></svg>`
*/
}; 给我的那部分。
component.html
<app-svg-icon name="message_blue"></app-svg-icon>我只能看到图像的一部分。这很奇怪,因为当我将svg文件传递给<img src="file.svg"/>时,我可以看到它是完整的图像,或者只是在浏览器中打开文件,我可以看到完整的图像。
怎么了?
发布于 2020-11-20 06:51:45
我已经从svg中删除了剪辑路径,它起了作用。但我不知道为什么XD
https://stackoverflow.com/questions/64924971
复制相似问题