SVG <use>引用visibility:hidden节点时pattern失效问题及原理咨询

测试代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="foo" style="border:1px solid red;">
        <svg id="123" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%;">
            <use href="#hidden-svg"></use>
        </svg>
    </div>

    <div id="bar" style="visibility: hidden;">
        <svg id="hidden-svg" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; overflow: visible;">
            <g>
                <defs>
                    <pattern id="imagefill" width="100" height="100"
                        patternUnits="userSpaceOnUse">
                        <rect x="0" y="0" width="10" height="10" fill="red"></rect>
                    </pattern>
                    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="1080"
                        id="gradientFill">
                        <stop offset="0" stop-color="#FFFFFF" stop-opacity="1"></stop>
                        <stop offset="1" stop-color="#D9D9D9" stop-opacity="1"></stop>
                    </linearGradient>
                </defs>
                <path fill="url(#imagefill)" d="M 0 0 L 1920 0 L 1920 1080 L 0 1080 Z "></path>
                <path fill="url(#gradientFill)" d="M 0 0 L 100 0 L 100 1080 L 0 1080 Z "></path>
            </g>
            <text x="100" y="100" font-size="100" fill="red">123</text>
        </svg>


    </div>
</body>

</html>

问题描述 #

设置foo和bar两个节点：foo通过<use>引用bar内部的SVG，bar被设置为visibility:hidden。出现以下现象：

• bar中的<text>节点与gradient填充能正常渲染
• <pattern>填充的path无法显示，给<pattern>设置visibility:visible后问题解决

1. 导致该现象的具体原因是什么？ #

• visibility:hidden会让元素及其子元素默认不可见，但子元素可通过显式设置visibility:visible恢复显示。你的bar容器设为visibility:hidden，里面的<pattern>继承了这个属性，而<pattern>是需要被渲染才能生成填充图案的可渲染资源——它本身不可见的话，用它填充的路径自然显示不出图案。
• <linearGradient>属于纯样式资源，它本身不需要直接渲染到页面，只是提供颜色渐变规则，所以即使所在容器是hidden，也不影响被url()引用生成填充效果。
• <text>元素被<use>克隆后，在foo的SVG上下文里渲染：<use>会复制原text的结构和样式，但原text本身没设visibility:hidden，只是父容器bar隐藏，克隆后的text父容器是foo里的可见SVG，因此能正常显示。

2. SVG中的<use>元素具体工作原理是怎样的？ #

<use>的核心是克隆复用SVG内容，具体流程：

1. 定位目标：通过href（旧版用xlink:href）找到当前文档内的目标SVG元素（比如示例中的#hidden-svg）。
2. 创建副本：生成目标元素的深度克隆副本，这个副本属于“影子DOM”，不会出现在主DOM树中，但会渲染到<use>所在的位置。
3. 样式继承：副本会继承<use>自身的属性（比如transform、opacity），但原元素的样式会被保留，除非<use>显式覆盖。
4. 资源引用规则：引用的资源（比如url(#imagefill)这类）仍然基于原文档的DOM结构解析，不是克隆后的副本——这也是示例中<pattern>受原容器visibility影响，而克隆的<text>不受影响的核心原因。

额外说明：<use>只能引用当前文档内的元素，跨文档引用需要特殊处理；如果引用的元素在<defs>中，它本身不会被渲染，只有通过<use>引用才会显示。

内容的提问来源于stack exchange，提问作者Bryan Adamss