使用背景图像填充SVG路径,而不知道高度和宽度

时间:2012-05-21 15:54:53

标签: html svg background-image

我可以创建一个SVG图像,其中包含一个填充的SVG路径,如本问题中已经提到的:Fill SVG path element with a background-image

SVG看起来像这样:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
    <g transform="translate(0, 0) rotate(0)" opacity="1">
        <defs>
            <pattern id="img_patrickComp_patrick_cv1_Graphic3" height="313" width="468"  patternTransform="translate(0, 0) scale(1, 1) rotate(0)" patternUnits="userSpaceOnUse">
                <image x="0" y="0" opacity="1" height="313" width="468" xlink:href="http://www.bittbox.com/wp-content/uploads/2008/04/free_hires_wood_texture_5.jpg" />
            </pattern>
        </defs>
        <path fill="url(#img_patrickComp_patrick_cv1_Graphic3)" stroke="Blue" d="M 86,100L 298,394L 289,710L 100,610L 100,400L 46,400 z" />
    </g>
</svg>

(链接到SVG:http://jsfiddle.net/2UFtV/

是否可以在不知道图像的宽度和高度的情况下创建相同的纹理SVG?

1 个答案:

答案 0 :(得分:2)

如果要保留栅格图像的原始尺寸,则需要知道尺寸是否为。