在使用剪辑路径的 svg rect 元素上重复背景图像答案

【问题标题】：Repeating background image on a svg rect element that is using clip-path在使用剪辑路径的 svg rect 元素上重复背景图像
【发布时间】：2014-08-13 06:39:09
【问题描述】：

我想向使用剪辑路径的 svg rect 元素添加重复的背景图像。 svg 文件必须具有 viewbox 属性。

看小提琴 (http://jsfiddle.net/tbbtester/ES9cB/2/) - 我希望三角形的背景看起来与矩形相似 - 它们使用相同的图像作为背景，为什么它们看起来如此不同？

HTML：

<p></p>
<div class="section-top">
    <div>
    <svg viewBox='0 0 100 50' preserveAspectRatio="none">
        <rect x="0" y="0" height="50" width="100" />

        <defs><clipPath id="section2a"><polygon points='0,0 100,5 100,50 '/></clipPath>
        <pattern patternUnits="userSpaceOnUse" id="pat1" x="0" y="0" width="1px" height="1px">
            <image width="1px" height="1px" xlink:href="http://svgtest.tbb.dev.novicell.dk/bg.png" />
        </pattern>
        </defs>
        </svg>
    </div>
</div>

CSS：

.section-top{position:absolute;width:100%;top:250px;}
.section-top    div{height:0;position: relative;padding-top:50%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:url(#pat1);clip-path: url(#section2a);}
p{height:200px;background: url(http://svgtest.tbb.dev.novicell.dk/bg.png);}

【问题讨论】：

很难判断这些应该是什么样子，因为您的域 (svgtest.tbb.dev.novicell.dk) 目前似乎无法访问。
@BigBadaboom 已修复，域现在可以从外部访问！

标签： html css svg viewbox

【解决方案1】：

没有任何方法可以使图案不随 SVG 一起缩放。它与其他所有内容一样受 viewBox 和 preserveAspectRatio 设置的影响。

如果您事先知道缩放将是什么，您可以在patternTransform 属性中应用变换的逆。否则你就倒霉了。

【讨论】：