时间戳

首页 > 解决方案 > SVG：为什么在图像上的 svg 中绘制的形状不可见？

angular - SVG：为什么在图像上的 svg 中绘制的形状不可见？

问题描述

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

在此处输入图像描述

这是我的代码：

HTML：

<div class="img-map">
    <img #image src="https://content.gnoss.ws/imagenes/Documentos/ImagenesSemanticas/07aabdfa-981f-41f7-828d-78f21adb80a6/eb1d0185-7d5b-4d3a-b84a-5aefd95d3365.jpg" alt=""/>

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

</div>

CSS：

.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%;
}

TS：

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

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

我试过的：

我不知道我做错了什么。谢谢！

标签： angulartypescriptsvg

解决方案

SVG 的默认视图框为 300 x 150，原点为 0,0。在您的示例中，多边形坐标为：1015,481 1043,578 1087,565 1055,467。所以它们都在 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>

它设置了一个原点为 1000,400 且大小为 100 x 200 的视图框。然后，您的 SVG 内容将被平移和缩放，以便所有坐标的 x 位置在 1000 到 1100 之间，y 位置在 400 到 200 之间600 位于 SVG 的可见区域内。

所以viewBox属性会影响 SVG 的内容。width，另一方面不影响 SVG 的内容，而是影响 SVG 的显示位置和大小height。position

推荐阅读