在不知道高度和宽度的情况下使用背景图像填充SVG路径 [英] Fill SVG path with a background-image without knowing height&width

问题描述

我可以创建一个SVG图像，其中包含一个填充的SVG路径，正如在这个问题中已经提到的那样：用背景图像填充SVG路径元素

SVG如下所示：

 <？xml version =1.0encoding =UTF-8standalone =no？> 
< svg xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkxmlns：ev =http： //www.w3.org/2001/xml-eventsversion =1.1> 
< g transform =translate（0，0）rotate（0）opacity =1> 
< defs> 
  < / pattern> 
< / defs> 
  
< / g> 
< / svg> 
  

（链接到SVG： http://jsfiddle.net/2UFtV/ ）

是否有可能在不知道宽度和高度的图像？

解决方案

如果你想保存在它的原生尺寸的光栅图像，你需要知道尺寸是。

I'm able to create an SVG Image which contains a filled SVG path, as already mentioned in this question: Fill SVG path element with a background-image

The SVG looks like this:

<?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>

(Link to the SVG: http://jsfiddle.net/2UFtV/)

Is it possible to create the same textured SVG without knowing the width and height of the image?

解决方案

If you want to preserve the raster image at it's native dimensions you need to know the dimensions yes.

这篇关于在不知道高度和宽度的情况下使用背景图像填充SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！