如何在画布图像内插入 svg 图像标记

Question

我有一个问题要解决。在我的画布图像中，我放置了一个标记，但这是图像类型“png”，我想要一个图标 svg，以便我可以更改颜色。

此代码有效，我需要将 .png 更改为 .svg，但不起作用。

var Marker = function () {

    this.Sprite = new Image();
    this.Sprite.src="http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png";
    this.Width = 20;
    this.Height = 32;
    this.XPos = 0;
    this.YPos = 0;
    this.textarea=null;
}

Answer 1

1. 将

   this.Sprite.src

   替换为 SVG 图像源。

2. 将 CSS 类添加到 SVG 元素以应用样式。

3. 使用 CSS 更改 SVG 图标的颜色。

这是修改后的代码：

var Marker = function () {
    this.Sprite = new Image();
    this.Sprite.src = "your-icon.svg"; // Replace with the path to your SVG icon
    this.Sprite.classList.add("marker-icon"); // Add a CSS class to the SVG element
    this.Width = 20;
    this.Height = 32;
    this.XPos = 0;
    this.YPos = 0;
    this.textarea = null;
}

在 HTML 或 CSS 中，定义

marker-icon

类并指定所需的颜色：

.marker-icon {
    fill: blue; /* Change the fill color to your desired color */
    width: 20px; /* Adjust the width and height as needed */
    height: 32px;
}

将

"your-icon.svg"

替换为 SVG 图标文件的路径，并将 CSS 类中的

fill

属性设置为您想要的标记颜色。这样，您只需修改 CSS 中的

fill

属性即可更改颜色，并且可以灵活地使用不同颜色的 SVG 图标。

希望有帮助