Блог

Главная - Вопросы по программированию - Использовать тег SVG foreignObject в Angular7

Использовать тег SVG foreignObject в Angular7

#angular #svg

#angular #svg

Вопрос:

В angular 7 я хочу использовать SVG foreignObject для вставки некоторого HTML-кода.Но это не работает.Терминал сообщает об ошибке.Angular не может идентифицировать HTML-тег

Это код

 <g id="peizhi" (click)="config()" style="width: 110px; height: 30px" transform="translate(181,0)">
<!--      <a (click)="config()" style="width: 110px;height: 30px">-->
        <use xlink:href="#Rectangle" x="0" y="0"></use>
        <text x="15" y="10" style="fill: rgba(245, 245, 245, 1);width: 24px;height: 27px;" font-size="12px">
          配置
        </text>
        <polygon  points="41 0, 47 0, 44 4" fill="rgba(216, 216, 216, 1)"/>

      <foreignObject width="100" height="50"
                     requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
        <!-- XHTML content goes here -->
        <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>
<!--      </a>-->
    </g>

Это ошибка

 ERROR Error: Uncaught (in promise): Error: Template parse errors:
':svg:p' is not a known element:
1. If ':svg:p' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("     <!-- XHTML content goes here -->
        <body xmlns="http://www.w3.org/1999/xhtml">
        [ERROR ->]<p>Here is a paragraph that requires word wrap</p>
        </body>
      </foreignObject>
"): ng:///OperateNavModule/EndmonitorNavComponent.html@49:8
':svg:body' is not a known element:

Ответ №1:

Вам нужно добавить пространство имен xhtml в абзац. Вот так:

 <xhtml:p>Here is a paragraph that requires word wrap</p>

Вы можете попробовать это здесь.

Ответ №2:

 <ng-template #nodeTemplate let-node>
  <svg:g class="node">
    <svg:foreignObject>
      <div>Your HTML here</div>
    </svg:foreignObject>
  </svg:g>
</ng-template>

или

 <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px">
  <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>
  <foreignObject  x="10" y="10" width="100px" height="50px" >
    <xhtml:div xmlns="http://www.w3.org/1999/xhtml" style="background-color: aqua;">
      foreign object
    </xhtml:div> 
  </foreignObject> 
</svg>

Таким образом, мы можем использовать foreigObject в angular

Комментарии:

1. Спасибо за ваш ответ. Аналогичное решение, если кто-то использует d3 для рисования элементов, ele.append("xhtml:div") выполнит эту работу.