【问题标题】:Can SVG filters be applied similarly to the Anonymous Function?SVG 过滤器可以与匿名函数类似地应用吗?
【发布时间】:2016-10-06 12:20:48
【问题描述】:

所以我想知道,在 SVG 中,过滤器必须像这样应用:

<defs>
<filter id="foo">
<!-- let's pretend that it does something -->
</filter>
</defs>
<g filter="url(#foo)">
<!-- some graphic elements - or maybe instead of a <g> element it's a singular graphic -->
</g>

现在,这对文件来说是很多的额外权重,尤其是当图像具有仅使用一次的过滤器时。然而,在 JavaScript 或 PHP 中,类似这样的东西:

someFunctionWithCallback(foo);

function foo(bar) {
    // do stuff
}

可以这样简化:

someFunctionWithCallback(function(bar) {
    // do stuff
});

有没有办法在 SVG 中做同样的事情?例如。在我使用它的元素内声明一个过滤器,同时消除重量和存储它以备后用的需要?

【问题讨论】:

  • 你可以把过滤器变成data URI
  • @RobertLongson 是的,我知道这些。不幸的是,它要么在这种情况下不起作用,要么我做错了,而且它在消除大部分文件方面并不是那么好,这是,嗯,主要的一点JS 匿名函数。
  • 你知道CSS filters吗?

标签: xml svg svg-filters


【解决方案1】:

一个典型的过滤器是几百字节。生成的 SVG 平均有数十千字节的废话,您可以对其进行优化。平均商业页面加载具有数百千字节的图像权重和可以优化的 javascript。

不要花时间优化无关紧要的东西。

【讨论】:

  • 按照这个逻辑,JavaScript 匿名函数不应该存在;它们在那里是因为它使代码更容易理解。这正是我问这个问题的原因:我对我所有的 SVG 进行了手工编码(好吧,除了一点点),我关心理解它的难度。通过简单地使用@RobertLongson 的blur(25px) 过滤元素比引用文件的完全不同部分更有意义。
  • 这不是您在问题中陈述的理由 - 这是为了减少文件重量
  • 嗯……它只是让它更简单。虽然我猜这个问题可能很模糊
猜你喜欢
  • 2014-04-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多