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

Question

我正在使用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" />

直接粘贴在<svg></svg> 标记之间时，它会在屏幕上可见。我正在以这种方式呈现我的svg.component。

<svg:g svg-component [Data]="SvgData"></svg:g>

我制作了一个 stackblitz 演示，您可以使用 view here，我注意到在此演示中 graphic.component 渲染但不是 svg 在模板内。除了所有数据都清楚地显示在需要看到的地方，我可以复制和粘贴输出的 svg 元素，我真的不知道这里出了什么问题。在此之前，我在 svg.component 模板中使用了 <text> 元素来处理 component works 文本，它渲染得很好，所以我真的不明白现在有什么不同。

Answer 1

您的 svg 有问题。 stackblitz with working svg in template url

一个像下面这样的简单 svg 就像一个魅力。

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

您的 svg 的问题是您的视图框偏离了方向，这就是您的 svg 不可见的原因。

在 stackblitz 中检查 1000 1000 视图框（缩小），您将看到您的 svg 已被渲染和显示。只是不在你期望的地方。它在页面下方，您需要更高的视口才能使其可见。