jjzjj

css - SVG 规范的 XMLNS W3 URL 现在在 Chrome 中抛出错误

coder 2024-06-23 原文

我在 filter: grayscale(100%) 的浏览器中使用此 SVG 蒙版进行灰度处理不起作用:

filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

不久前，这工作得很好，但现在我在控制台中收到此错误:

Unsafe attempt to load URL data:image/svg+xml;utf8,http://www.w3.org/2000/svg' height='0'>#greyscale from frame with URL [my domain here]. Domains, protocols and ports must match.

不用说，灰度滤镜不再起作用了。

  1. 你能解释一下哪里出了问题吗？
  2. 是否可以修复此问题以便使用相同的 CSS 代码、不抛出错误并且过滤器正常工作？
  3. 考虑到它提到了相同的域和协议(protocol)，虽然我不知道如何实现解决方案，因为我不明白这个问题，但我能够使用相同的协议(protocol)将文件放置和链接到相同的域/子域，而不是使用外部 URL。

更新:

用户@Potherca 评论道:

...worked in Chrome 52, broke in Chrome 53...

这也是我的经验。 SVG 掩码在当前版本的 Chrome(Chrome 版本 53.0.2785.116)中不起作用，但在以前的版本中有效。它在 Firefox 和 Safari 中仍然有效。

更新 2: 我用 https 试过了喜欢...xmlns='http://www.w3.org/2000/svg'...但错误/错误仍然存​​在。

更新 3: 正如用户@Potherca 所建议的那样，将 SVG 过滤器行移动到跨浏览器过滤器规则列表的顶部可以消除该错误。注意:这是一种解决方法，但主要错误仍然存​​在于 Chrome/Safari/webkit 中，但在本次更新时不存在于其他浏览器/工具包中。

最佳答案

我遇到了类似的问题。为了支持跨浏览器，在 CSS 中添加了几行 filter。

这似乎是由于 SVG 滤镜排在最后导致的。通过将其向上移动到其他过滤器行之前，Chrome 使用了另一个 filter 并且错误消失了。

.gray-out {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */
}

关于css - SVG 规范的 XMLNS W3 URL 现在在 Chrome 中抛出错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39646388/

ChromeXMLNScodefilter0.3333cssxmlsvgcross-domain

有关css - SVG 规范的 XMLNS W3 URL 现在在 Chrome 中抛出错误的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - rails : save file from URL and save it to Amazon S3 - 2

    从给定URL下载文件并立即将其上传到AmazonS3的更直接的方法是什么(+将有关文件的一些信息保存到数据库中，例如名称、大小等)？现在，我既不使用Paperclip，也不使用Carrierwave。谢谢 最佳答案 简单明了:require'open-uri'require's3'amazon=S3::Service.new(access_key_id:'KEY',secret_access_key:'KEY')bucket=amazon.buckets.find('image_storage')url='http://www.ex

  3. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  6. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  7. ruby - Rack:如何将 URL 存储为变量？ - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  8. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  9. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  10. ruby - gem 规范失败 - 2

    我正在为毕业设计开发GEM，TravisCI构建不断失败。这是我在Travis上的链接:https://travis-ci.org/ricardobond/perpetuus/builds/8709218构建错误是:$bundleexecrakerakeaborted!Don'tknowhowtobuildtask'default'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_wrapper:14:in`eval'/home/travis/.rvm/gems/ruby-1.9.3-p448/bin/ruby_noexec_

随机推荐