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演示，您可以在这里查看，并且在此演示中我注意到， graphic.component呈现但模板内部的svg不呈现。 除了所有数据可以清楚地到达需要复制和粘贴输出的svg元素的位置之外，我真的无法弄清楚这里出了什么问题。 在此之前，我在svg.component模板中使用了<text>元素，以使组件可以正常显示文本，因此我真的不明白现在有什么不同。

Answer 1

您的svg有问题。 在模板网址中使用svg的stackblitz

像下面这样的简单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已呈现并显示。 只是不在您期望的位置。 它离页面很远，您需要更高的视口才能使其可见。