Menu
In angular 7,I want to user the SVG foreignObject to insert some HTML code.But it is not working.The terminal report an error.The angular fail to identify the HTML tag
<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:
213
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification.
Get Data from a Server You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. Use these features to dynamically generate interactive graphics.
It can be used to make graphics and animations like in HTML canvas. The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are defined within this specification.
Save the icon as unicorn_icon.svg to the src/assets folder of your project. To use our custom unicorn icon with the <mat-icon> component tag, we’ll need to import HttpClientModule. And add it to the module’s array of imports: Now, we can register our custom "unicorn" icon with the MatIconRegistry service provided by Angular Material.
You need to add the xhtml namespace to the paragraph. Like this:
<xhtml:p>Here is a paragraph that requires word wrap</p>
You can try it out here.
100
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:foreignObject>
<div>Your HTML here</div>
</svg:foreignObject>
</svg:g>
</ng-template>
OR
<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>
Like this we can use foreigObject in angular
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
