Angular SVG元素在浏览器中呈现，但在屏幕上不可见

我正在使用

DomSanitizer

和

SafeHtml

将

svg

代码注入到我的组件中。我可以在控制台中看到所有元素都在渲染，但它们在我的屏幕上不可见。我使用的是

DomSanitizer

，因为我是从数据对象生成代码的。下面是一个由代码生成的元素示例

<svg:polyline id="left_arm_line_10" points="67.379982,339.7200012 72.1800003,562.5199585 61.2800064,592.4199829 75.0799942,614.3199463 76.2800064,715.4199829 81.2800064,756.4199829 85.2800064,712.5199585 84.879982,603.5199585 74.7800064,587.5199585 85.6800003,558.2199707 85.379982,347.519989" stroke="black" stroke-width=".22" fill="none" />

---

我制作了一个stackblitz演示，您可以看到，在这个演示中，

graphic.component

呈现了模板中的

svg

。除此之外，所有的数据都清楚地显示在需要看到的地方，我可以复制和粘贴输出的svg元素，我真的不知道这里出了什么问题。在此之前，我在

svg.component

模板中使用了

元素，用于呈现良好的component works文本，因此我现在真的不明白有什么不同。

您的svg有问题

下面这样一个简单的svg很有魅力

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

svg的问题是您的viewbox太远了，这就是svg不可见的原因

---

选中stackblitz 1000视图框（缩小），您将看到svg同时呈现和显示。只是不在你期望的地方。它离页面太远了，您需要一个更高的视口才能使其可见。

可能它们位于错误的名称空间中。您的确切意思是什么？好的，我阅读了该文档，到目前为止，我正在按照它建议的方式应用所有内容。你能具体指出我做错了什么吗？也许DomSanitizer和SafeHtml根本不支持非HTML名称空间。是的，我注意到当我将元素直接放入SVG标记时，它确实出现了。我试图弄清楚为什么迭代到

graphic.component

中的组件没有呈现。我需要它来工作，因为我已经将实际代码设置为将每个元素迭代到组件中。我修改了

视图框

，看看它是否像你提到的那样出现在其他地方，但直到我将它直接放入

标记中，它才可见。你能给我看一个演示吗？我对视口进行了大量扩展，甚至在整个元素中添加了一个填充，只是为了看看是否在某个地方看到了矩形的边缘，我什么也没看到。但是，如果我将元素硬记录到

graphic.component

的模板中，它会以定义的空间呈现，那么为什么在视图中会显示该元素，而我正在注入模板的元素却远离了我找不到它的某个地方？这是怎么回事？它包含了您自己的svg。好吧，也许我应该更清楚地知道我在问什么。在stackblitz中，您将看到我有一个

图形组件

文件夹，其中包含一个组件。我显然是想让我的演示对象通过它进行渲染，因为我构建了一种机制，可以将元素迭代到该组件中。当

标签中应该有

时，您一直向我显示直接硬编码到

标签中的元素代码。我从属性的数据存储中生成元素代码，以获得我试图使用

[innerHtml]

和

域管理器将其注入
graphic.componet
模板的结果元素。它显示在控制台中，但不显示在屏幕上
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>