[英]Repeating background image on a svg rect element that is using clip-path
我想向使用剪切路径的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);}
没有任何方法可以使模式不随SVG一起缩放。 它受viewBox和prepareAspectRatio设置的影响,与其他所有设置相同。
如果您事先知道缩放的比例,则可以在patternTransform
属性中应用变换的逆函数。 否则,你很不幸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.