本节教程介绍在 Lit 中使用 SVG 的基础知识，包括如何：

学习

Permalink to "学习"

在图案制作中，_元素_指的是图案中无法从其他部分推导出来的最小片段。

本演示中的_元素_将是一段单独的文本。我们可以使用 _SVG 模板_在 SVG 和 Lit 中创建文本，如下所示。

const helloSVG = svg`<text>Hello, SVG!</text>`;

在 Lit 中，SVG 模板必须是 <svg> 元素的子元素。<svg> 元素必须包含在 HTML 模板内。以下示例展示了这些要求的实现方式。

const helloHTML = html`
  <svg>
    ${svg`<text>Hello, SVG!</text>`}
  </svg>
`;

实践

Permalink to "实践"

创建一个名为 createElement 的函数，使用 Lit SVG 模板生成一个带有可配置显示文本的 <text> 元素。 为 <text> 元素添加文本相关的样式属性。

const createElement = (chars: string): SVGTemplateResult => svg`
  <text
    dominant-baseline="hanging"
    font-family="monospace"
    font-size="24px">
    ${chars}
  </text>
`;
const createElement = (chars) => svg`
  <text
    dominant-baseline="hanging"
    font-family="monospace"
    font-size="24px">
    ${chars}
  </text>
`;

在 repeat-pattern 组件的 render() 函数中调用 createElement，类似下面的示例。

@customElement('repeat-pattern')
export class RepeatPattern extends LitElement {        
  render() {
    return html`
      <svg height="100%" width="100%">
        ${createElement("lit")}
      </svg>
    `;
  }
}
import { LitElement } from "lit";

export class RepeatPattern extends LitElement {
  render() {
    return html`
      <svg height="100%" width="100%">
        ${createElement("lit")}
      </svg>
    `;
  }
}
customElements.define('repeat-pattern', RepeatPattern);

最后，创建一个名为 chars 的响应式属性，以便 repeat-pattern 的使用者可以配置渲染的文本。

@customElement('repeat-pattern')
export class RepeatPattern extends LitElement {    
  @property({type: String}) chars = "lit";
  
  render() {
    return html`
      <svg height="100%" width="100%">
        ${createElement(this.chars)}
      </svg>
    `;
  }
}
export class RepeatPattern extends LitElement {
  static properties = {
    chars: {type: String},
  };

  constructor() {
    super();
    this.chars = 'lit';
  }

  render() {
    return html`
      <svg height="100%" width="100%">
        ${createElement(this.chars)}
      </svg>
    `;
  }
}
customElements.define('repeat-pattern', RepeatPattern);

完成本节后，你将在下一章中学习如何在 SVG 中创建可复用的结构。