Angular SVG：为什么不'；svg中绘制的形状在图像上是否可见？

我在一个有角的项目里工作。我的目标是在图像中绘制多边形。为此，我在图像中放置了一个svg。img和svg具有宽度和高度，并且多边形的点位于数据库中，因此它们的值不能更改。问题是多边形显示不好。这是一个小例子：

这是我的代码：

HTML:

TS:

我已经做了一个测试。我想这个问题与规模有关，但我不知道如何解决它

我所尝试的：

• 我在stackoverflow中看到过这一点，但我没有看到任何有效的答案
• 这包括带有viewbox属性的代码，但没有任何效果。

---

我不知道我做错了什么。谢谢大家!

SVG的默认视图框为300 x 150，原点为0,0。在您的示例中，多边形坐标为：1015481 1043578 1087565 1055467。因此，它们都位于SVG的可见区域之外。因此，什么都看不见

您应该设置一个明确的视图框，例如：

<svg viewBox="1000 400 100 200" style="position:absolute; left:0px; top:0px; width: 100%; height: 100%">
    <polygon class="polygonStyle" [attr.points]="stringPoints" />
</svg>

它设置一个原点为1000400、大小为100 x 200的视图框。然后将对SVG内容进行转换和缩放，使x位置介于1000和1100之间、y位置介于400和600之间的所有坐标位于SVG的可见区域内

---

因此，

viewBox

属性会影响SVG的内容<另一侧的code>width、

height

和

position

不会影响SVG的内容，而是会影响SVG的显示位置和大小。

您是否尝试在

position:relative

的子元素中添加

位置：绝对

？@efkah是的，它实际上在我编写的代码中。svg具有

位置：绝对。

图像没有宽度和高度。此外，您还需要svg具有与图像相同的宽度和高度，但这一切都取决于数据库中的坐标。这些坐标看起来如何：百分比？只是数字？另外：如果您需要响应图形，可能需要svg元素的viewBox属性。@enxaneta它们在数据库中的存储方式并不重要，因为我将它们的格式转换为多边形所需的字符串。因此，stringPoints变量非常重要。你说得对。我将把答案标为正确。非常感谢。

.img-map {
  overflow: auto;
  position: relative;
  max-width: calc(100vw - 450px);
}

.polygonStyle {
  stroke: rgba(0, 0, 255, 0.75);
  fill: none;
}

img {
  top: 0;
  left: 0;
  border-radius: 10px;
  height: auto;
  width: 100%;
}

stringPoints = "1015,481 1043,578 1087,565 1055,467";

<svg viewBox="1000 400 100 200" style="position:absolute; left:0px; top:0px; width: 100%; height: 100%">
    <polygon class="polygonStyle" [attr.points]="stringPoints" />
</svg>