问题

我需要使用Angular HTTP将<svg></svg>元素作为纯文本传递给后端。例如，我有一个带有<svg>元素的Angular-HTML页面：

&lt;div&gt; 
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 540 320&quot;&gt;
        &lt;defs&gt;
            &lt;path id=&quot;Triangle&quot; d=&quot;M120 20 L 220 193.205 L 20 193.205 Z&quot; stroke=&quot;red&quot; fill=&quot;url(#radial)&quot;/&gt;
            &lt;path id=&quot;Maths&quot; d=&quot;M250,50C380,50 350,150 480,150&quot; stroke=&quot;green&quot; fill=&quot;none&quot;/&gt;
            &lt;path id=&quot;Chemistry&quot; transform=&quot;translate(-200,0) scale(1.5)&quot; d=&quot;M250,50C380,50 350,150 480,150&quot; stroke=&quot;blue&quot; fill=&quot;none&quot;/&gt;
            &lt;path id=&quot;Path&quot; d=&quot;M20,240 C40,280 60,280 200,230 A100 100 0 0 1 300,260 L 330,280 Q 400,320 500,200&quot; stroke=&quot;orange&quot; fill=&quot;none&quot;/&gt;
            &lt;linearGradient id=&quot;linear&quot; x1=&quot;0&quot; x2=&quot;1&quot; gradientUnits=&quot;objectBoundingBox&quot;&gt;
                &lt;stop stop-color=&quot;green&quot; offset=&quot;0&quot;/&gt;
                &lt;stop stop-color=&quot;red&quot; offset=&quot;1&quot;/&gt;
            &lt;/linearGradient&gt;
            &lt;radialGradient id=&quot;radial&quot; cx=&quot;0.5&quot; cy=&quot;0.6667&quot; r=&quot;0.6&quot; gradientUnits=&quot;objectBoundingBox&quot;&gt;
                &lt;stop stop-color=&quot;orange&quot; offset=&quot;0.2&quot;/&gt;
                &lt;stop stop-color=&quot;yellow&quot; offset=&quot;1&quot;/&gt;
            &lt;/radialGradient&gt;
            &lt;pattern id=&quot;pattern&quot; width=&quot;4&quot; height=&quot;4&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
                &lt;rect width=&quot;4&quot; height=&quot;4&quot;/&gt;
                &lt;rect width=&quot;2&quot; height=&quot;2&quot; fill=&quot;red&quot;/&gt;
                &lt;rect x=&quot;2&quot; y=&quot;2&quot; width=&quot;2&quot; height=&quot;2&quot; fill=&quot;red&quot;/&gt;
            &lt;/pattern&gt;
        &lt;/defs&gt;
        &lt;rect x=&quot;2%&quot; y=&quot;2%&quot; width=&quot;96%&quot; height=&quot;96%&quot; fill=&quot;url(#linear)&quot; fill-opacity=&quot;0.3&quot; stroke=&quot;orange&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;5 2 2 2 5 5&quot;/&gt;
        &lt;use xlink:href=&quot;#Triangle&quot;/&gt;
        &lt;use xlink:href=&quot;#Maths&quot;/&gt;
        &lt;use xlink:href=&quot;#Chemistry&quot;/&gt;
        &lt;use xlink:href=&quot;#Path&quot;/&gt;
        &lt;text textLength=&quot;600px&quot; lengthAdjust=&quot;spacingAndGlyphs&quot; fill=&quot;url(#pattern)&quot;&gt;
            &lt;textPath xlink:href=&quot;#Triangle&quot; font-size=&quot;20&quot; font-family=&quot;serif&quot; font-weight=&quot;bold&quot; textLength=&quot;600px&quot; lengthAdjust=&quot;spacingAndGlyphs&quot;&gt;Text adjusted around a triangle&lt;/textPath&gt;
        &lt;/text&gt;
        &lt;text font-family=&quot;sans-serif&quot;&gt;
            &lt;textPath xlink:href=&quot;#Maths&quot; font-size=&quot;30&quot; fill=&quot;blue&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Maths x&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt; + y&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt; = z&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt;!&lt;/textPath&gt;
            &lt;textPath xlink:href=&quot;#Chemistry&quot; font-size=&quot;30&quot; fill=&quot;green&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Chemistry 2H&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt; + O&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt; -&gt; 2H&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt;O&lt;/textPath&gt;
            &lt;textPath xlink:href=&quot;#Path&quot; font-size=&quot;30&quot; fill=&quot;purple&quot; dominant-baseline=&quot;middle&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Text centered on a complex path&lt;/textPath&gt;
        &lt;/text&gt;
    &lt;/svg&gt;
&lt;/div&gt;

是否可能使用Angular HTTP将SVG传递到后端？

英文:

I need to pass an <svg></svg> element to backend as clear text using angular HTTP.
for example, I have an angular-html page with a <svg> element,

&lt;div&gt; 
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 540 320&quot;&gt;
                &lt;defs&gt;
                &lt;path id=&quot;Triangle&quot; d=&quot;M120 20 L 220 193.205 L 20 193.205 Z&quot; stroke=&quot;red&quot; fill=&quot;url(#radial)&quot;/&gt;
                &lt;path id=&quot;Maths&quot; d=&quot;M250,50C380,50 350,150 480,150&quot; stroke=&quot;green&quot; fill=&quot;none&quot;/&gt;
                &lt;path id=&quot;Chemistry&quot; transform=&quot;translate(-200,0) scale(1.5)&quot; d=&quot;M250,50C380,50 350,150 480,150&quot; stroke=&quot;blue&quot; fill=&quot;none&quot;/&gt;
                &lt;path id=&quot;Path&quot; d=&quot;M20,240 C40,280 60,280 200,230 A100 100 0 0 1 300,260 L 330,280 Q 400,320 500,200&quot; stroke=&quot;orange&quot; fill=&quot;none&quot;/&gt;
                &lt;linearGradient id=&quot;linear&quot; x1=&quot;0&quot; x2=&quot;1&quot; gradientUnits=&quot;objectBoundingBox&quot;&gt;
                    &lt;stop stop-color=&quot;green&quot; offset=&quot;0&quot;/&gt;
                    &lt;stop stop-color=&quot;red&quot; offset=&quot;1&quot;/&gt;
                &lt;/linearGradient&gt;
                &lt;radialGradient id=&quot;radial&quot; cx=&quot;0.5&quot; cy=&quot;0.6667&quot; r=&quot;0.6&quot; gradientUnits=&quot;objectBoundingBox&quot;&gt;
                    &lt;stop stop-color=&quot;orange&quot; offset=&quot;0.2&quot;/&gt;
                    &lt;stop stop-color=&quot;yellow&quot; offset=&quot;1&quot;/&gt;
                &lt;/radialGradient&gt;
                &lt;pattern id=&quot;pattern&quot; width=&quot;4&quot; height=&quot;4&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
                    &lt;rect width=&quot;4&quot; height=&quot;4&quot;/&gt;
                    &lt;rect width=&quot;2&quot; height=&quot;2&quot; fill=&quot;red&quot;/&gt;
                    &lt;rect x=&quot;2&quot; y=&quot;2&quot; width=&quot;2&quot; height=&quot;2&quot; fill=&quot;red&quot;/&gt;
                &lt;/pattern&gt;
                &lt;/defs&gt;
                &lt;rect x=&quot;2%&quot; y=&quot;2%&quot; width=&quot;96%&quot; height=&quot;96%&quot; fill=&quot;url(#linear)&quot; fill-opacity=&quot;0.3&quot; stroke=&quot;orange&quot; stroke-width=&quot;2&quot; stroke-dasharray=&quot;5 2 2 2 5 5&quot;/&gt;
                &lt;use xlink:href=&quot;#Triangle&quot;/&gt;
                &lt;use xlink:href=&quot;#Maths&quot;/&gt;
                &lt;use xlink:href=&quot;#Chemistry&quot;/&gt;
                &lt;use xlink:href=&quot;#Path&quot;/&gt;
                &lt;text textLength=&quot;600px&quot; lengthAdjust=&quot;spacingAndGlyphs&quot; fill=&quot;url(#pattern)&quot;&gt;
                &lt;textPath xlink:href=&quot;#Triangle&quot; font-size=&quot;20&quot; font-family=&quot;serif&quot; font-weight=&quot;bold&quot; textLength=&quot;600px&quot; lengthAdjust=&quot;spacingAndGlyphs&quot;&gt;Text adjusted around a triangle&lt;/textPath&gt;
                &lt;/text&gt;
                &lt;text font-family=&quot;sans-serif&quot;&gt;
                &lt;textPath xlink:href=&quot;#Maths&quot; font-size=&quot;30&quot; fill=&quot;blue&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Maths x&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt; + y&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt; = z&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;super&quot;&gt;2&lt;/tspan&gt;!&lt;/textPath&gt;
                &lt;textPath xlink:href=&quot;#Chemistry&quot; font-size=&quot;30&quot; fill=&quot;green&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Chemistry 2H&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt; + O&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt; -&gt; 2H&lt;tspan font-size=&quot;20&quot; baseline-shift=&quot;sub&quot;&gt;2&lt;/tspan&gt;O&lt;/textPath&gt;
                &lt;textPath xlink:href=&quot;#Path&quot; font-size=&quot;30&quot; fill=&quot;purple&quot; dominant-baseline=&quot;middle&quot; text-anchor=&quot;middle&quot; startOffset=&quot;50%&quot;&gt;Text centered on a complex path&lt;/textPath&gt;
                &lt;/text&gt;
            &lt;/svg&gt;
    &lt;/div&gt;

Is it possible to pass the svg to backend with angular HTTP.

答案1

得分: 1

你可以使用 ViewChild 来选择 svg 元素，然后通过 outerHTML 访问 HTML。

示例

在 HTML 中设置对 svg 的引用，

&lt;svg #svgElement ...

从引用获取数据，

@ViewChild(&#39;svgElement&#39;, {static: true}) svgElement: ElementRef;

onClick() {
    console.log(this.svgElement.nativeElement.outerHTML)
}

英文:

You can use ViewChild for selecting svg element and then by outerHTML access the HTML.

Demo

Set reference to svg in HTML,

&lt;svg #svgElement ...

Get data from reference,

@ViewChild(&#39;svgElement&#39;, {static: true}) svgElement: ElementRef;

onClick() {
    console.log(this.svgElement.nativeElement.outerHTML)
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何将清除的HTML元素（作为文本格式）传递到后端（express js）？

问题

答案1

重新安装后，Angular CLI无法正常工作。

你可以通过点击链接来关闭汉堡菜单吗？

如何从每个具有4个子元素的4个网格元素创建横幅？

CSS Grid 用于在桌面上创建浮动侧边栏，而在移动设备上堆叠。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论