如何在 JavaScript 中将图像 (svg) 转换为渲染的 svg？

Question

我有一个在单击 div 时加载的图像，如下所示：<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>从后端调用此图像时，它会作为图像而不是矢量（SVG 渲染）返回。如何使用 Javascript 或任何其他类似工具将其渲染为 SVG？谢谢！

Answer 1

使用img带有srcin 的标签实际上会为您向服务器发出 HTTP 请求。在这种情况下，您必须自己提出请求。您可以使用 JavaScript 原生的 which 来做到这一点Fetch API。

// This should be the path to your SVG file.

// Modify if incorrect.

const svgFilePath = 'public/images/my_image.svg';

// Select the current image.

const image = document.querySelector('.svg');

// Create a new dom parser to turn the SVG string into an element.

const parser = new DOMParser();

// Fetch the file from the server.

fetch(svgFilePath)

  .then(response => response.text())

  .then(text => {

    // Turn the raw text into a document with the svg element in it.

    const parsed = parser.parseFromString(text, 'text/html');

    // Select the <svg> element from that document.

    const svg = parsed.querySelector('svg');

    // If both the image and svg are found, replace the image with the svg.

    if (image !== null && svg !== null) {

      image.replaceWith(svg);

    }

  });

并处理多个文件。在本例中，我使用了一个包含对象的数组，这些对象保存id要获取的图像元素的 和srcsvg 文件的 。

// Array of object containing the id of the image you want to replace

// and the src of the SVG that takes it's place.

const svgFiles = [

  { id: 'image1', src: 'public/images/my_image_1.svg' },

  { id: 'image2', src: 'public/images/my_image_2.svg' },

  { id: 'image3', src: 'public/images/my_image_3.svg' },

];

// Create a new dom parser to turn the SVG string into an element.

const parser = new DOMParser();

// Loop over each object in the array and use the id and src

// with a destructuring assignment.

for (const { id, src } of svgFiles) {

  // Find the image. If it is not there, continue with the

  // loop to the next iteration.

  let image = document.getElementById(id);

  if (image === null) continue;

  // Fetch the file from the server.

  fetch(src)

    .then(response => response.text())

    .then(text => {

      // Turn the raw text into a document with the svg element in it.

      const parsed = parser.parseFromString(text, 'text/html');

      // Select the <svg> element from that document.

      const svg = parsed.querySelector('svg');

      // If the svg is found, replace the image with the svg.

      // Otherwise, continue the loop.

      if (svg === null) continue;

      image.replaceWith(svg);

    });

}

Answer 2

我注意到你正在使用asset()函数，所以我猜你不需要它是 JS
你可以使用提供Blade 指令的Laravel SVG 包@svg()。
它又小又方便

<a href="/settings">

    @svg('cog', 'icon-lg') Settings

</a>

<!-- Renders.. -->

<a href="/settings">

    <svg class="icon icon-lg">

        <path d="..." fill-rule="evenodd"></path>

    </svg>

    Settings

</a>