英文:
Portions of inline SVG not rendering in Firefox until selected or re-scrolled
问题
以下是您提供的内容的中文翻译：
我从网页上导出的一些内联SVG元素来自PlantUML。它们在Chrome、Edge和iOS上的Safari上可以正确显示，但在Firefox中，它们的部分内容有时不会渲染，除非我选择它们或将它们从页面上滚动出去再滚回来。如果我使用<img>标签包含SVG，则不会出现此问题，但这在Safari中无法正确渲染。
SVG具有“width”属性，建议参考这里：https://stackoverflow.com/questions/10353443/rendering-inline-svg-in-firefox
示例：
[![在此输入图像描述][1]][1]
[![在此输入图像描述][2]][2]
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
<filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
</filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606] entity ListDog-->
<g id="elem_ListDog">
<rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List<Dog></text>
</g>
</g>
</svg>
这是我用于调整大小并在页面中居中显示的CSS。<svg>元素嵌套在<figure>元素中。
figure.figure {
max-width: 100%;
margin: 1rem auto;
margin: auto;
}
figure.figure svg,
figure.figure img {
display: block;
max-width: 100%;
margin: auto;
height: auto !important;
}
完整的HTML示例：
<figure class="figure">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
<filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
</filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606] entity ListDog-->
<g id="elem_ListDog">
<rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List<Dog></text>
</g>
</g>
</svg>
<figcaption>
可能的数据路径
<span class="sources">
<a class="source" href="DataPaths.plantuml" target="_blank" title="点击下载图源代码">(源代码)</a>
<a class="source" href="DataPaths.svg" target="_blank" title="点击下载嵌入式SVG图像">(下载)</a>
</span>
</figcaption>
</figure>
更新：看起来与阴影有关。我使用skinparam Shadowing false去掉了方框上的阴影，问题就解决了。如果可能的话，我宁愿保留阴影，但这是一个线索。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="449px" preserveAspectRatio="none" style="width:1280px;height:449px;background:#00000000;" version="1.1" viewBox="0 0 1280 449" width="1280px" zoomAndPan="magnify">
<defs/>
<g id="elem_ListDog">
<rect fill="#FEFECE" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="521" y="29"/>
<text fill="#000000" font-family="sans-serif" font-size="14"
<details>
<summary>英文:</summary>
I have some inline SVG elements exported from PlantUML on a web page. They display properly in Chrome, Edge, and Safari on iOS, but in Firefox parts of them will sometimes not render until I either select them or scroll them off the page and back on. This also does not occur if I include the SVG using an `<img>` tag, but this doesn't render properly in Safari.
The SVGs have a "width" attribute, as suggested here: https://stackoverflow.com/questions/10353443/rendering-inline-svg-in-firefox
Example:
[![enter image description here][1]][1]
[![enter image description here][2]][2]
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
<filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
</filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606]
entity ListDog-->
<g id="elem_ListDog">
<rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List&lt;Dog&gt;</text>
</g>
</g>
</svg>
This is the CSS I am using to resize and center it in the page. The `<svg>` element is embedded within a `<figure>` element.
figure.figure {
max-width: 100%;
margin: 1rem auto;
margin: auto;
}
figure.figure svg,
figure.figure img {
display: block;
max-width: 100%;
margin: auto;
height: auto !important;
}
Full HTML sample:
<figure class="figure">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
<filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
<feGaussianBlur result="blurOut" stdDeviation="2.0"/>
<feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
<feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
<feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
</filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606]
entity ListDog-->
<g id="elem_ListDog">
<rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List&lt;Dog&gt;</text>
</g>
</g>
</svg>
<figcaption>
Possible Datapaths
<span class="sources">
<a class="source" href="DataPaths.plantuml" target="_blank" title="Click to download figure source code.">(Source)</a>
<a class="source" href="DataPaths.svg" target="_blank" title="Click to download embedded SVG figure.">(Download)</a>
</span>
</figcaption>
</figure>
---
Update: it appears to be related to shadowing. I removed the shadowing on the box with `skinparam Shadowing false` and the issue went away. I would prefer to keep shadowing if possible, but it's a lead.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="449px" preserveAspectRatio="none" style="width:1280px;height:449px;background:#00000000;" version="1.1" viewBox="0 0 1280 449" width="1280px" zoomAndPan="magnify">
<defs/>
<g id="elem_ListDog">
<rect fill="#FEFECE" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="521" y="29"/>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="531" y="53.5332">List&lt;Dog&gt;</text>
</g>
</svg>
[1]: https://i.stack.imgur.com/KEibD.png
[2]: https://i.stack.imgur.com/FOLmj.png
</details>
# 答案1
**得分**: 1
我无法复现这个问题，但有一点很明显：`<filter>` 元素混合了无单位的数字和百分比来调整滤镜效果区域的大小。理论上，它们应该是等效的，但也许将它们设置成相匹配会有所帮助。尝试将 `x` 和 `y` 属性设置为"-100%"，或者将 `width` 和 `height` 设置为"3"。
<details>
<summary>英文:</summary>
While I can't reproduce the problem, one thing stands out: The `<filter>` element mixes unitless numbers and percentages for sizing the filter effects region. Theoretically [they should be equipotent](https://svgwg.org/svg2-draft/coords.html#ObjectBoundingBoxUnits), but maybe it helps to make them match. Try either setting the `x` and `y` attributes to "-100%", or the `width` and `height` to "3".
</details>
# 答案2
**得分**: 0
这是要翻译的内容：
"我无法重现这个错误，但也许将SVG滤镜替换为CSS滤镜会有帮助：
```css
rect, ellipse {
filter: drop-shadow(4px 4px 2px #0006);
}
```"
<details>
<summary>英文:</summary>
I wasn't able to reproduce this bug, but maybe swapping the SVG filter for a CSS filter helps:
```css
rect, ellipse {
filter: drop-shadow(4px 4px 2px #0006);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论