首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当输入到角时,SVG的部分是不可见的

当输入到角时,SVG的部分是不可见的
EN

Stack Overflow用户
提问于 2020-11-20 06:45:36
回答 1查看 43关注 0票数 0

我有一个项目,在这个项目中,我将svg文件生成为一个svg.ts文件。(工具)。然后,我创建了一个app-svg组件,它处理svg映像。

svg.component.ts

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
<app-svg-icon name="message_blue"></app-svg-icon>

我只能看到图像的一部分。这很奇怪,因为当我将svg文件传递给<img src="file.svg"/>时,我可以看到它是完整的图像,或者只是在浏览器中打开文件,我可以看到完整的图像

怎么了?

EN

回答 1

Stack Overflow用户

发布于 2020-11-20 06:51:45

我已经从svg中删除了剪辑路径,它起了作用。但我不知道为什么XD

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64924971

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档