Question

我在这里遗漏了一些东西。使用svg元素的简单示例。我正在定义defs（可重复使用的定义）并在元素中使用id＆＃39; cry16CyclamenOpal_0.c15＆＃39;。

代码：

<svg width="1366" height="612" id="_svg" class="svg" viewBox="-78.48 43.82 752.30 337.05" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <g id="def_CyclamenOpal">
            <path d="M0,22c0,12.2,9.9,22,22,22s22-9.8,22-22S34.2,0,22,0S0,9.9,0,22" fill="#795482"></path>
            <path d="M4.9,22h34.2l-1.3-6.5l-3.4-5.6L28.6,6H15.5l-5.3,3.8l-3.9,5.7L4.9,22z" fill="#DD9FBB"></path>
            <path d="M39.1,22H4.9l1.3,6.5l3.4,5.6l5.9,4h13.1l5.2-3.8l3.9-5.8L39.1,22z" fill="#552860"></path>
            <path d="M4.9,22l1.3,6.5l7.5-3.1l4.8,5l-2.9,7.7l6.1,1.3l7-1.3l-3.1-7.6l4.8-5l7.4,3l1.3-6.5l-1.3-6.5l-7.3,3.1l0,0l-4.8-4.9L28.6,6l-6.2-1.3L15.5,6l3,7.6l-4.9,4.9l-7.4-3L4.9,22z" fill="#D84C5D"></path>
            <path d="M18.5,30.7l-5.1-5.1v-7l5.1-5h7.1l5,5v7l-5,5.1H18.5L18.5,30.7z" fill="#A568AF"></path>
        </g>
    </defs>

    <g class="elementParent">
        <g id="cry16CyclamenOpal_0.c15" class="ele" data-action="ele" transform="matrix(0.27,0,0,0.27,339.422,124.718)">
            <circle class="outer" cx="22" cy="22" r="22" fill="url(#defs_CyclamenOpal)"></circle>
        </g>
    </g>
</svg>

我的问题是为什么defs在屏幕上不可用？为什么图案在屏幕上的元素上不可见？请参阅jsfiddle。

Answer 1

注意：
我一开始误解了这个问题并发布了一个＆＃34; off-the-target＆＃34;回答。我删除了这部分，因为它对OP的问题没有帮助。

这是一个（略微修改过的）解决方案，使用<pattern>标记来定义填充模式：

＆＃13;

<svg width="1366" height="612" id="_svg" class="svg" viewBox="-78.48 43.82 752.30 337.05" 
         xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="opal" x="0" y="0" width="45" height="45" patternUnits="userSpaceOnUse">
            <path d="M0,22c0,12.2,9.9,22,22,22s22-9.8,22-22S34.2,0,22,0S0,9.9,0,22" fill="#795482"></path>
            <path d="M4.9,22h34.2l-1.3-6.5l-3.4-5.6L28.6,6H15.5l-5.3,3.8l-3.9,5.7L4.9,22z" fill="#DD9FBB"></path>
            <path d="M39.1,22H4.9l1.3,6.5l3.4,5.6l5.9,4h13.1l5.2-3.8l3.9-5.8L39.1,22z" fill="#552860"></path>
            <path d="M4.9,22l1.3,6.5l7.5-3.1l4.8,5l-2.9,7.7l6.1,1.3l7-1.3l-3.1-7.6l4.8-5l7.4,3l1.3-6.5l-1.3-6.5l-7.3,3.1l0,0l-4.8-4.9L28.6,6l-6.2-1.3L15.5,6l3,7.6l-4.9,4.9l-7.4-3L4.9,22z" fill="#D84C5D"></path>
            <path d="M18.5,30.7l-5.1-5.1v-7l5.1-5h7.1l5,5v7l-5,5.1H18.5L18.5,30.7z" fill="#A568AF"></path>
        </pattern>
    </defs>

    <g class="elementParent">
        <circle class="outer" cx="55" cy="155" r="100" fill="url(#opal)"></circle>
    </g>
</svg>

＆＃13;

在SVG中使用Defs

1 个答案: