Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - 使用带有内联数据 uri 的 svg 图像

In lại Tác giả: Walker 123 更新时间：2023-11-28 10:16:09 28 4
mua khóa gpt4 Nike

我很确定这是不可能的，但在放弃之前我想把它扔掉。

这是一把 fiddle ，http://jsfiddle.net/sqszuzep/6/ 


    




IE10/11



js:

// Chrome/Firefox/Safari
var x = encodeURIComponent(' ');

var y = encodeURIComponent('');

$(hàm () {
    $('#bg').css('background-image', 'url("data:image/svg+xml;utf8,'+ x +'")');
    $('#bg2').css('background-image', 'url("data:image/svg+xml;utf8,'+ y +'")');
});

// IE 10/11
// Chrome/Firefox/Safari
var x = btoa(' ');

var y = btoa('');

$(hàm () {
    $('#bg3').css('background-image', 'url("data:image/svg+xml;base64,'+ x +'")');
    $('#bg4').css('background-image', 'url("data:image/svg+xml;base64,'+ y +'")');
});

本质上，我试图使用 svg 图像，对 svg 元素进行编码，然后在元素的 css 中使用它。这适用于矢量，但不适用于通过 svg 加载的图像。

我相信这属于 https://bugs.webkit.org/show_bug.cgi?id=63548说“不允许图像加载更多资源”。

我看到没有浏览器支持此功能，或者我做错了什么。

它Đúng可以对图像数据进行 base64 编码并使用它，正如我写的这个 fiddle 中所演示的那样:http://jsfiddle.net/N2n27/3/ .在支持 svg 滤镜(非 IE)的浏览器上，这是一种实现模糊和其他滤镜效果的简便方法。

我是不是漏掉了什么？

câu trả lời hay nhất

y 版本有两个问题。

a) svg 元素没有命名空间(在 x 版本中有)但在 y 版本中它还需要 xlink 命名空间，因为图像 href 属性位于 xlink 命名空间中。

b) SVG 中的图像是外部的。

CSS 背景本身就是图像，因此它引用的任何 SVG 都无法加载外部资源。因此，您需要对内部图像数据进行 URI 编码，然后对外部 SVG 进行 uri 编码(从而对内部图像数据进行双重编码)

所以你需要这样的东西......

var y = encodeURIComponent('Which I've completed here for the Firefox/Chrome case

关于css - 使用带有内联数据 uri 的 svg 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25335411/

28 4 0
Đề xuất bài viết: java - Android 中通过用户输入遍历网络
Đề xuất bài viết: ios - RxSwift 3.1 UITableView 数据源不工作
Đề xuất bài viết: 具有语法错误检查和调试功能的 JavaScript 编辑器
Đề xuất bài viết: ios - 取消对自定义 segue 的操作
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress