为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

30秒到达战场 2022-06-09 16:41:20
我有一个在单击 div 时加载的图像,如下所示:<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>从后端调用此图像时,它以图像而不是矢量的形式返回(SVG 渲染)。如何使用 Javascript 或任何其他类似工具将其渲染为 SVG?
查看完整描述

2 回答

?
白板的微信

TA贡献1883条经验 获得超3个赞

使用img带有 in 的标签src本质上会为您向服务器发出 HTTP 请求。在这种情况下,您必须自己提出请求。您可以使用Fetch APIJavaScript 原生的 which 来做到这一点。


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


    });

}


查看完整回答
反对 回复 2022-06-09
?
神不在的星期二

TA贡献1963条经验 获得超6个赞

我注意到你正在使用asset()函数,所以我猜你不需要它是 JS

你可以使用提供刀片指令的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>


查看完整回答
反对 回复 2022-06-09
  • 2 回答
  • 0 关注
  • 237 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号