亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 JavaScript 中將圖像 (svg) 轉換為渲染的 svg?

如何在 JavaScript 中將圖像 (svg) 轉換為渲染的 svg?

躍然一笑 2023-10-24 21:47:24
我有一個在單擊 div 時加載的圖像,如下所示:<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>從后端調用此圖像時,它會作為圖像而不是矢量(SVG 渲染)返回。如何使用 Javascript 或任何其他類似工具將其渲染為 SVG?謝謝!
查看完整描述

2 回答

?
犯罪嫌疑人X

TA貢獻2080條經驗 獲得超4個贊

使用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);


? ? });

}


查看完整回答
反對 回復 2023-10-24
?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

我注意到你正在使用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>


查看完整回答
反對 回復 2023-10-24
  • 2 回答
  • 0 關注
  • 161 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號