我有一個(gè)在單擊 div 時(shí)加載的圖像，如下所示：<img class="svg" src="{{asset('public/images/my_image.svg') }}" alt="" id='image'>從后端調(diào)用此圖像時(shí)，它會(huì)作為圖像而不是矢量（SVG 渲染）返回。如何使用 Javascript 或任何其他類似工具將其渲染為 SVG？謝謝！
2 回答
犯罪嫌疑人X
TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
使用img帶有srcin 的標(biāo)簽實(shí)際上會(huì)為您向服務(wù)器發(fā)出 HTTP 請(qǐng)求。在這種情況下，您必須自己提出請(qǐng)求。您可以使用 JavaScript 原生的 which 來(lái)做到這一點(diǎn)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);
? ? }
? });
并處理多個(gè)文件。在本例中，我使用了一個(gè)包含對(duì)象的數(shù)組，這些對(duì)象保存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);
? ? });
}
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
我注意到你正在使用asset()函數(shù)，所以我猜你不需要它是 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>
- 2 回答
- 0 關(guān)注
- 178 瀏覽
添加回答
舉報(bào)
0/150
提交
取消