如何在javascript中将图像(svg)转换为渲染的svg? [英] How to convert image (svg) to rendered svg in javascript?

问题描述

我有一个在单击 div 时加载的图像，如下所示:

I have an image that loads when clicking a div like so:

<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>

当从后端调用此图像时，它作为图像而不是矢量(SVG 渲染)返回.如何使用 Javascript 或任何其他类似工具将其呈现为 SVG?

When calling this image from the backend side, it's returned as an image and not vectors (SVG render). How can I render it to SVG using Javascript or any other similar tool?

谢谢！

推荐答案

使用带有 src 的 img 标签实质上是为您向服务器发出 HTTP 请求.在这种情况下，您必须自己提出请求.您可以使用 Fetch API 原生于 JavaScript.

Using an img tag with a src in essentially makes an HTTP request to the server for you. In this case you have to make the request yourself. You can do that with the Fetch API which is native to JavaScript.

// 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 和 svg 文件的 src.

And with handling multiple files. In this case I've used an array with objects that hold the id of the image element you want to get and the src of the svg file.

// 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);

    });
}

这篇关于如何在javascript中将图像(svg)转换为渲染的svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！