我们可以在 SVG 模板中渲染 Angular 组件吗? [英] Can we render Angular components inside of our SVG templates?

问题描述

看到我们可以将我们的模板文件保存为 .svg 而不是 .html 现在我想我可以制作可以如下使用的 svg 组件.

main.component.svg

mySvg.component.svg

测试文本</text>

我收到一个错误，说 </text> 不是一个可识别的元素，所以我将其修改为这个

 测试文本</svg:text>

错误消失了，但没有渲染.我将脚本直接添加到 main.component.svg 文件中的 <svg> 标签中，开头没有 svg: 并且它工作正常.

我应该在 mySvg.component 模板中做些什么来使其作为可重用组件工作，还是我们必须在一个模板中生成所有 SVG?

更新

我尝试使用 SVG 的 像这样

这也不起作用.我使用段落标记对其进行了测试，并注意到我必须使用 <xhtml:p> 才能呈现它.我尝试将 xhmtl: 部分添加到我的组件中以获得咧嘴笑和傻笑，但仍然没有看到任何渲染.现在我想知道是否有某种形式的 angular: 可以使用.

解决方案

你可以这样做:

模板:

svg 组件:

import { Component } from '@angular/core';@成分({选择器:'[svgtext]'，模板:`<svg:text x="0" y="65">测试文本</svg:text>`，样式:[`你的样式来这里`]})导出类 HelloComponent {}

所以诀窍是通过属性选择器将您的 svg 组件附加到另一个 svg 元素(组 - g).这样生成的模板是有效的 SVG，您可以渲染文本.

请参阅此处:https://stackblitz.com/edit/angular-fd1tcd

如果你用标签做组件选择器，那么 SVG schmema 就会被破坏，浏览器将无法渲染 SVG.使用 group(这是一个有效的 svg 容器)我们避免了这个问题，并且额外的组件 html 被注入到这样一个组中.

您可以阅读 Tero 撰写的这篇精彩文章(现在已经很老了)以获得更多见解:https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

Seeing that we can save our template files as .svg rather than .html now I figured I could make svg components that could be used as follows.

main.component.svg

<svg>
    <my-svg-component></my-svg-component>
</svg>

mySvg.component.svg

<text x="0" y="60">test text</text>

I got an error saying <text></text> wasn't a recognized element so I modified it to this

<svg:text x="0" y="65">test text</svg:text>

The error went away however nothing is rendering. I added the script directly into the <svg> tag in the main.component.svg file without the svg: at the beginning and it worked fine.

Is there something I should be doing in the mySvg.component template to make this work as a reusable component or do we have to generate all the SVG inside one template?

UPDATE

I tried using SVG's <foreignObject> like so

<svg>
    <foreignObject>
        <my-svg-component></my-svg-component>
    </foreignObject>
<svg>

this didn't work either. I tested it out with a paragraph tag and noticed I had to use <xhtml:p> in order for it to render. I tried adding the xhmtl: part to my component for grins and giggles and still didn't see anything render. Now I'm wondering if there's an angular: of some form that can be used.

解决方案

You could do that this way:

template:

<svg>
  <g svgtext></g>
</svg>

svg component:

import { Component } from '@angular/core';

@Component({
  selector: '[svgtext]',
  template: `<svg:text x="0" y="65">test text</svg:text>`,
  styles: [`your styles come here`]
})
export class HelloComponent  {

}

So the trick is to attach your svg component to another svg element (group - g) via attribute selector. This way resulting template is valid SVG and you can get your text rendered.

See here: https://stackblitz.com/edit/angular-fd1tcd

If you do component selector with tags, than SVG schmema is broken and browser won't be able to render SVG. Using group (which is a valid svg container) we avoid that issue and the additional component html gets injected right inside such a group.

You can read this fantastic article by Tero (pretty old now) for more insights: https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

这篇关于我们可以在 SVG 模板中渲染 Angular 组件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！