我想创建一个CSS类来填充带有图像的路径,该路径可以应用于任何SVG路径并用图像填充该路径.必须拉伸图像才能适合该路径.
为达到这个;我用图像标签创建一个图案,并将宽度和高度设置为100％.但图像占整个屏幕的100％而不是容器的objectBoundingBox(在本例中为svg标签).
以下是示例代码：
.myClass {
fill: url(#image);
stroke: red;
stroke-width: 5;
}
<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id='image' x=0 y=0 width="100%" height="100%" patternUnits='objectBoundingBox'>
<image xlink:href='myImage.png' x=0 y=0 width="100%" height="100%" preserveAspectRatio="none"></image>
</pattern>
</defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
<path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>
可能是我做错了什么.
请为此问题建议任何解决方案.
解决方法
这是你的工作 –
http://jsfiddle.net/eAfTc/
.myClass {
fill: url(#image);
stroke: red;
stroke-width: 5;
}
<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<image xlink:href='http://dummyimage.com/600x400/abc/333' width="100" height="100" preserveAspectRatio="none"></image>
</pattern>
</defs>
</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
<path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>
请注意,有一个patternContentUnits和一个patternUnits,他们做了不同的事情.我个人更喜欢使用viewBox来定义坐标系.
这是一个new example,显示了应用于不同大小和宽高比的各种元素的模式,它也摆脱了第一个svg片段.
