草庐IT

html - SVG 堆叠导致失真

coder 2023-08-03 原文

我正在试用 SVG stacking technique 启用多个图标堆叠在一个文件中，只需要来自浏览器的一个 HTTP 请求。该技术描述得非常详尽here .

基本上这个想法是将多个 SVG 元素放入单个 SVG 文件中，并使用 CSS 样式隐藏所有图标，除了您当前要显示的图标。您可以使用 CSS :target 选择当前要显示的图标选择器。

该技术对我有用，除了堆叠多个图标会导致显示的图标出现奇怪的扭曲，即使所有其他图标都被隐藏了。

在我使用的示例中，我将其简化为仅堆叠 两个 图标:一个美国国旗图标和一个英国国旗图标。

(简化的)SVG 文件是:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg id="svg153" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

    <svg:style 
        xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
        .i { display: none; }
        .i:target { display: block; }
    </svg:style>

    <svg:svg id="uk" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
       <!-- SVG elements to draw UK flag -->
    </svg:svg>

    <svg:svg id="us" xmlns:svg="http://www.w3.org/2000/svg" class = "i" height="480" width="640" version="1.1">
       <!-- SVG elements to draw US flag --> 
    </svg:svg>
</svg>

请注意，CSS 嵌入在 SVG 文件中，在 <svg::style> 中元素。 CSS 很简单:

.i { display: none; }
.i:target { display: block; }

这样，任何svg::svg带有 class="i" 的元素自动不可见，除非我们在 SVG url 中专门针对它。所以这样，要显示美国国旗图标，我将使用以下 HTML 代码段:

<img 
    src="flags.svg#us" 
    width="80" 
    height="60" 
    alt="SVG Stacked Image" 
/>

当然，为了显示英国国旗，我会将其更改为 src="flags.svg#uk"

无论如何，所有这一切都非常有效......除了在我堆叠图像时在 Firefox 和 Chrome 中出现奇怪的图像失真。

这是我从 SVG 文件中删除(隐藏的)英国国旗时美国国旗的屏幕截图:

如您所见，它看起来不错。

但是当我把它堆在英国国旗前时，它看起来像:

正如您所看到的，图像变得奇怪地扭曲了 - 它几乎看起来像是压缩图像中出现大量“伪像”时低质量 JPEG 所发生的情况。

那么为什么会发生这种情况呢？与美国国旗图标叠加的其他图像都是不可见的，那么它们为什么要影响可见图标呢？

我在 Google 上搜索了很多次以寻找答案，尽管 SVG 堆叠技术确实存在很多问题和“陷阱”，但它们都与跨浏览器兼容性有关。但是，该技术在大多数最新的浏览器(包括 IE9)上运行良好。此外，在 Firefox 和 Chrome 中都会出现失真，因此这不太可能是跨浏览器问题，而是我做错了什么。

那么，当我应用 SVG 堆叠技术时，是什么导致了这种奇怪的失真？

最佳答案

不知道堆叠和目标。但我知道两种简单的方法.. 可能可以帮助您更轻松地解决问题。

  1. 当您从网络甚至计算机上选择了不同的 svg 图标，但每个图标都是独立的。
    • 有一个网站“icomoon.io”，我们可以在这里从在线库中选择不同的图标，或者从您的计算机中选择您自定义的 svg 图标。
    • 打开' https://icomoon.io/app/ '
    • 选择“导入图标”以从您的计算机上传自定义图标。
    • 在页面底部有“从库中添加图标...”，用于从在线库中选择图标。
    • 从“选择”工具(位于顶部)根据需要选择多个图标。
    • 选择多个图标后，选择底部的“生成 SVG、PNG、PDF”按钮。
    • 然后要将所有这些合并到一个文件中，请点击左下角第一个按钮中“下载”选项旁边的“设置图标”。
    • 从中选择“包含 Tiles (CSS Sprite)”。
    • 根据需要在一行中放置适当的边距和图标数量，然后在 demo.html 中下载组合 Sprite 及其 xml 代码，在 style.css 中下载 css 定义。
  2. 当您已经使用“AI”或任何其他软件创建了包含多个图标的单个 SVG 文件时。
    • 只需将该文件上传(导入)到 icomoon.io，然后单击“生成 SVG、PNG、PDF”按钮并下载 sprite xml 文件。

关于html - SVG 堆叠导致失真，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27679946/

堆叠html34svgcss

有关html - SVG 堆叠导致失真的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  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 - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  7. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  10. ruby - 从另一个私有(private)方法中使用 self.xxx() 调用私有(private)方法 xxx，导致错误 "private method ` xxx' called” - 2

    我正在尝试获得良好的Ruby编码风格。为防止意外调用具有相同名称的局部变量，我总是在适当的地方使用self.。但是现在我偶然发现了这个:classMyClass上面的代码导致错误privatemethodsanitize_namecalled但是当删除self.并仅使用sanitize_name时，它会起作用。这是为什么？ 最佳答案 发生这种情况是因为无法使用显式接收器调用私有(private)方法，并且说self.sanitize_name是显式指定应该接收sanitize_name的对象(self)，而不是依赖于隐式接收器(也是

随机推荐