Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区嘉宾路深华商业大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 网站建设如何使用SVG

    时间:2021-05-20  作者:尼高GARY  来源:https://www.niegoweb.com
    网站建设中使用SVG是非常棒:它们很小,可以在任何规模上看起来都很清晰,并且可以自定义而无需创建单独的文件。但是,今天我感觉Web标准中缺少一些东西:一种将它们包含为外部文件的方法,该文件也保留了格式的自定义功能。


    网站建设

    例如,假设您要使用存储为的网站徽标web-logo.svg。你可以做:<img src="/images/logo.svg" />。如果您的徽标到处都是一样的话,那很好。但是在许多情况下,您会使用2-3个相同徽标的变体。例如,Slack有两个版本。

    为了解决这个问题,我创建了一个名为svg-loader的库。简而言之,它通过XHR提取SVG文件并将其作为内联元素加载,从而使您可以自定义诸如fill和的属性stroke,就像内联SVG一样。例如,我在副项目SVGBox上有一个徽标。不用为每个变体创建一个不同的文件,我可以拥有一个文件并自定义填充颜色:

    我曾经data-src设置SVG文件的URL。该fill属性将覆盖fill原始SVG文件。要使用该库,我唯一要确保的是提供的文件具有适当的CORS标头,以使XHR成功。该库还在本地缓存文件,从而使后续操作更快。即使是第一次加载,其性能也可以与使用<img>标签相媲美。

    这个概念并不新鲜。svg-inject做类似的事情。但是,svg-loader更易于使用,因为我们只需要在代码中的某个地方(通过<script>标签或JavaScript包)包含库即可。不需要额外的代码。

    相关案例

    OTHER CASE