fix some file icon ui

[a1012112796]

fix #36071

looks that's because if an svg in hiden env, it's color added by fill="url(#a)" will become not usefull. by ai helping, I think moving it out of page by position is a good solution. fell free creat a new pull request if you have a better soluton. Thanks.

[silverwind]

Interesting bug. I can reproduce on Chrome and Safari, but not on Firefox. I think the root cause must be some obscure mechanism where some SVG elements like this linearGradient inherit some CSS properties, like in this case display: none.

I can't think of a better fix, but please move this CSS into web_src/css/base.css:

.hide-absolute {
  position: absolute;
  left: -9999px;
}

[wxiaoguang]

Maybe a similar case:

https://github.com/go-gitea/gitea/blob/main/templates/base/disable_form_autofill.tmpl

[silverwind]

You mean the styling of .ui .form .autofill-dummy? It's not quite the same as this.

[wxiaoguang]

You mean the styling of .ui .form .autofill-dummy? It's not quite the same as this.

I didn't say "same". I mean "similar":

1. They are all caused by uncontrollable and unclear browser's behaviors
2. They all need "not really hidden" but "visually not existing" elements
3. They all have complex backgrounds and need comments to explain, otherwise the future readers won't understand

---

For this case, these styles work without magic number:

... {
    position: absolute;
    width: 0px;
    height: 0px;
    overflow: hidden;
}

[silverwind]

Generally speaking I would avoid SVG "icon maps" with xlink. There are too many obscure browser behaviours/bugs related to xlink and rendering the SVG directly is best to avoid those.

[silverwind]

Oh and btw, xlink:href is deprecated: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/xlink:href.

[wxiaoguang]

Generally speaking I would avoid SVG "icon maps" with xlink. There are too many obscure browser behaviours/bugs related to xlink and rendering the SVG directly is best to avoid those.

xlink was used to avoid duplicate SVG contents to reduce page size.

It should be easy to remove the xlink and render the icon directly. I am fine with either approach.

[silverwind]

I don't think the size impact will really matter. On a big page, there may be 100 icons, which shouldn't be more than a few kBs.

[wxiaoguang]

Oh and btw, xlink:href is deprecated: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/xlink:href.

href isn't https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/href

[wxiaoguang]

I don't think the size impact will really matter. On a big page, there may be 100 icons, which shouldn't be more than a few kBs.

Not a few, but dozens of or hundreds of.