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>

我制作了一个可以view here进行的stackblitz演示，并且在此演示中我注意到graphic.component呈现了模板，但没有svg呈现。除了所有数据可以清楚地到达需要复制和粘贴输出的svg元素的位置之外，我真的无法弄清楚这里出了什么问题。在此之前，我在<text>模板中使用svg.component元素来制作组件作品文本，该文本效果很好，所以我真的不明白现在有什么不同。< / p>

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既被渲染又显示。只是不在您期望的位置。它离页面很远，您需要更高的视口才能使其可见。

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

1 个答案: