Как сделать SVG редактируемым?

Question

У меня есть svg с текстом, и я хотел бы использовать его в качестве шаблона:

Вот svg, более или менее:

<svg width="375" height="667" viewBox="0 0 375 667" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="375" height="667" fill="#2EA64F"/>
<path d="M29.5959 ... 117.008Z" id="text" fill="#FFFEFE"/>
<path d="M58.3599 ... 485.248H311.071V490H293.287V484.276Z" fill="#FFCC09"/>
<path d="M228.129 ... 212.166H148.547V212.166Z" id="buble" fill="white"/>
<path d="M143.801 ... 250.994Z" fill="white"/>
<path d="M165.965 ... 173.508 243.248V257.772H165.965V240.799H165.965Z" fill="white"/>
<path d="M209.734 ... 250.994Z" fill="white"/>
<path d="M37.5787 ... 428.264Z" id="number" fill="#91D5EB" fill-opacity="0.21"/>
<path d="M37.2187 ... 430.817Z" fill="white"/>
<g filter="url(#filter0_d)">
<path d="M220 ... 565Z" stroke="white" stroke-opacity="0.51" stroke-width="6"/>
</g>
<path d="M183.172 ... 190.308 560.296H189.588V557.992Z" fill="white"/>
<path d="M176.142 ... 578.142Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="142" y="525" width="85" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="375" height="667" fill="white"/>
</clipPath>
</defs>
</svg>

Раньше я делал это:

• sms-confirmation.component.html

    <div class="container"
        fxLayout="row"
        fxLayout.sm="column"
        fxLayout.xs="column"
        fxLayoutAlign.gt-md="space-around center"
        fxLayoutGap="10px" 
        fxLayoutGap.xs="0">

      <div fxFlex="40">
        <p>Merci {{patient.title}} {{patient.name}} !</p>
      </div>

      <div fxFlex="40">
        <p>Vous etes bien enregistré</p>
      </div>

      <div fxFlex="40">
        <p>Un sms avec votre ticket a été envoyé a ce numéro</p>
      </div>

      <div fxFlex="40">
        <p>{{patient.number}}</p>
      </div>

• sms-confirmation.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Patient } from './patient';



    @Component({
      selector: 'app-sms-confirmation',
      templateUrl: './sms-confirmation.component.html',
      styleUrls: ['./sms-confirmation.component.scss']
    })
    export class SmsConfirmationComponent implements OnInit {

      PATIENT = {
        id: '0',
        name: 'Dupont',
        title: 'Monsieur',
        number: '0661664522'
      };

      patient = this.PATIENT;

      constructor() { }

      ngOnInit() {
      }

    }

Моя попытка

Я изменил ее на:

<svg width="375" height="667" viewBox="0 0 375 667" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<rect width="375" height="667" fill="#2EA64F"/>
<text x="110" y="70" fill="white" ng-model="foo">Merci Monsieur {{foo}} !</text>
<text x="110" y="90" fill="white" ng-model="foo">Vous etes bien enregistré</text>
<path d="M228.129 ... 212.166H148.547V212.166Z" id="buble" fill="white"/>
<path d="M143.801 ... 250.994Z" fill="white"/>
<path d="M165.965 ... 173.508 243.248V257.772H165.965V240.799H165.965Z" fill="white"/>
<path d="M209.734 ... 250.994Z" fill="white"/>
<text x="145" y="500" fill="yellow" ng-model="foo">0661664522</text>
<path d="M37.2187 ... 578.142Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="142" y="525" width="85" height="84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="375" height="667" fill="white"/>
</clipPath>
</defs>
</svg>

Но теперь мне нужно сделать имя динамическим c

Answer 1

Трудно понять ваш вопрос, но я думаю, что это то, что вы ищете.

Вы можете поместить (встроить) svg в ваш sms-confirmation.component.html файл следующим образом:

<div class="container"
...

      <div fxFlex="40">
        <p>Vous etes bien enregistré</p>
      </div>
      <svg>
        .... 
      </svg>
      <div fxFlex="40">
        <p>Un sms avec votre ticket a été envoyé a ce numéro</p>
      </div>
...

Затем используйте varialbe внутри текста svg: <svg:text><tspan>{{randomText}}</tspan></svg:text>, затем вы можете использовать @Input Decorator внутри компонента (sms-confirmation.component.ts), @Input() randomText: string;