问题

以下是您提供的内容的中文翻译：

我从网页上导出的一些内联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&lt;Dog&gt;</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&lt;Dog&gt;</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 `&lt;img&gt;` tag, but this doesn&#39;t render properly in Safari.

The SVGs have a &quot;width&quot; 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]

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; contentStyleType=&quot;text/css&quot; height=&quot;58px&quot; preserveAspectRatio=&quot;none&quot; style=&quot;width:105px;height:58px;background:#00000000;&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 105 58&quot; width=&quot;105px&quot; zoomAndPan=&quot;magnify&quot;&gt;
    &lt;defs&gt;
        &lt;filter height=&quot;300%&quot; id=&quot;fd8xeq7sn9ue2&quot; width=&quot;300%&quot; x=&quot;-1&quot; y=&quot;-1&quot;&gt;
        &lt;feGaussianBlur result=&quot;blurOut&quot; stdDeviation=&quot;2.0&quot;/&gt;
        &lt;feColorMatrix in=&quot;blurOut&quot; result=&quot;blurOut2&quot; type=&quot;matrix&quot; values=&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0&quot;/&gt;
        &lt;feOffset dx=&quot;4.0&quot; dy=&quot;4.0&quot; in=&quot;blurOut2&quot; result=&quot;blurOut3&quot;/&gt;
        &lt;feBlend in=&quot;SourceGraphic&quot; in2=&quot;blurOut3&quot; mode=&quot;normal&quot;/&gt;
        &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;g&gt;
    &lt;!--MD5=[3c439da1e0ca43de06b2478d62879606]
    entity ListDog--&gt;
        &lt;g id=&quot;elem_ListDog&quot;&gt;
        &lt;rect fill=&quot;#FEFECE&quot; filter=&quot;url(#fd8xeq7sn9ue2)&quot; height=&quot;37.6094&quot; style=&quot;stroke:#000000;stroke-width:1.5;&quot; width=&quot;84&quot; x=&quot;7&quot; y=&quot;7&quot;/&gt;
        &lt;text fill=&quot;#000000&quot; font-family=&quot;sans-serif&quot; font-size=&quot;14&quot; lengthAdjust=&quot;spacing&quot; textLength=&quot;64&quot; x=&quot;17&quot; y=&quot;31.5332&quot;&gt;List&amp;lt;Dog&amp;gt;&lt;/text&gt;
        &lt;/g&gt;
    &lt;/g&gt;
    &lt;/svg&gt;


This is the CSS I am using to resize and center it in the page. The `&lt;svg&gt;` element is embedded within a `&lt;figure&gt;` 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:

    &lt;figure class=&quot;figure&quot;&gt;
    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; contentStyleType=&quot;text/css&quot; height=&quot;58px&quot; preserveAspectRatio=&quot;none&quot; style=&quot;width:105px;height:58px;background:#00000000;&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 105 58&quot; width=&quot;105px&quot; zoomAndPan=&quot;magnify&quot;&gt;
    &lt;defs&gt;
        &lt;filter height=&quot;300%&quot; id=&quot;fd8xeq7sn9ue2&quot; width=&quot;300%&quot; x=&quot;-1&quot; y=&quot;-1&quot;&gt;
        &lt;feGaussianBlur result=&quot;blurOut&quot; stdDeviation=&quot;2.0&quot;/&gt;
        &lt;feColorMatrix in=&quot;blurOut&quot; result=&quot;blurOut2&quot; type=&quot;matrix&quot; values=&quot;0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0&quot;/&gt;
        &lt;feOffset dx=&quot;4.0&quot; dy=&quot;4.0&quot; in=&quot;blurOut2&quot; result=&quot;blurOut3&quot;/&gt;
        &lt;feBlend in=&quot;SourceGraphic&quot; in2=&quot;blurOut3&quot; mode=&quot;normal&quot;/&gt;
        &lt;/filter&gt;
    &lt;/defs&gt;
    &lt;g&gt;
    &lt;!--MD5=[3c439da1e0ca43de06b2478d62879606]
    entity ListDog--&gt;
        &lt;g id=&quot;elem_ListDog&quot;&gt;
        &lt;rect fill=&quot;#FEFECE&quot; filter=&quot;url(#fd8xeq7sn9ue2)&quot; height=&quot;37.6094&quot; style=&quot;stroke:#000000;stroke-width:1.5;&quot; width=&quot;84&quot; x=&quot;7&quot; y=&quot;7&quot;/&gt;
        &lt;text fill=&quot;#000000&quot; font-family=&quot;sans-serif&quot; font-size=&quot;14&quot; lengthAdjust=&quot;spacing&quot; textLength=&quot;64&quot; x=&quot;17&quot; y=&quot;31.5332&quot;&gt;List&amp;lt;Dog&amp;gt;&lt;/text&gt;
        &lt;/g&gt;
    &lt;/g&gt;
    &lt;/svg&gt;


    &lt;figcaption&gt;
        Possible Datapaths
        &lt;span class=&quot;sources&quot;&gt;
            &lt;a class=&quot;source&quot; href=&quot;DataPaths.plantuml&quot; target=&quot;_blank&quot; title=&quot;Click to download figure source code.&quot;&gt;(Source)&lt;/a&gt;
            &lt;a class=&quot;source&quot; href=&quot;DataPaths.svg&quot; target=&quot;_blank&quot; title=&quot;Click to download embedded SVG figure.&quot;&gt;(Download)&lt;/a&gt;
        &lt;/span&gt;
    &lt;/figcaption&gt;
    &lt;/figure&gt;

---

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&#39;s a lead.

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; contentStyleType=&quot;text/css&quot; height=&quot;449px&quot; preserveAspectRatio=&quot;none&quot; style=&quot;width:1280px;height:449px;background:#00000000;&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 1280 449&quot; width=&quot;1280px&quot; zoomAndPan=&quot;magnify&quot;&gt;
      &lt;defs/&gt;
        &lt;g id=&quot;elem_ListDog&quot;&gt;
          &lt;rect fill=&quot;#FEFECE&quot; height=&quot;37.6094&quot; style=&quot;stroke:#000000;stroke-width:1.5;&quot; width=&quot;84&quot; x=&quot;521&quot; y=&quot;29&quot;/&gt;
          &lt;text fill=&quot;#000000&quot; font-family=&quot;sans-serif&quot; font-size=&quot;14&quot; lengthAdjust=&quot;spacing&quot; textLength=&quot;64&quot; x=&quot;531&quot; y=&quot;53.5332&quot;&gt;List&amp;lt;Dog&amp;gt;&lt;/text&gt;
        &lt;/g&gt;
    &lt;/svg&gt;




  [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&#39;t reproduce the problem, one thing stands out: The `&lt;filter&gt;` 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 &quot;-100%&quot;, or the `width` and `height` to &quot;3&quot;.

</details>



# 答案2
**得分**: 0

这是要翻译的内容：

"我无法重现这个错误，但也许将SVG滤镜替换为CSS滤镜会有帮助：
```css
rect, ellipse {
  filter: drop-shadow(4px 4px 2px #0006);
}
```"

<details>
<summary>英文:</summary>

I wasn&#39;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);
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Portions of inline SVG not rendering in Firefox until selected or re-scrolled

问题

显示大型 .tif 文件在 Leaflet 地图上 07.2023

在CSS中有关`background-image`的问题。

创建一个默认显示当前月份的下拉菜单 – Angular 和 TypeScript

无法使用 flexbox 裁剪图像。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论