Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/image/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Image 获取大图像以对SVG进行模式化_Image_Svg - Fatal编程技术网

Image 获取大图像以对SVG进行模式化

Image 获取大图像以对SVG进行模式化,image,svg,Image,Svg,所以,我有一个SVG,我正试图创建一个横穿屏幕的有角度的条。但我希望它有一个有图案的背景。我这里有三个图案背景,但只有一个很小。有什么好处 <svg class="bAngle1" width="100%" height="800"> <defs> <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">

所以,我有一个SVG,我正试图创建一个横穿屏幕的有角度的条。但我希望它有一个有图案的背景。我这里有三个图案背景,但只有一个很小。有什么好处

    <svg class="bAngle1" width="100%" height="800">
        <defs>
            <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse">
                <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image>
            </pattern>
            <pattern id="beaconWords" x="0" y="0" width="1020" height="537" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
                <image preserveAspectRatio="none" width="1020" height="537" xlink:href="http://173.254.99.45/~b/words.png"></image>
            </pattern>
        </defs>
      <polygon points="2600,0 2600,800 0,500 0,300" fill="url(#beaconWords)"/>
    </svg>

在JSFIDLE中:


PNG似乎被放大了,但我不知道如何修复它。

您使用的是
patternContentUnits=“objectBoundingBox”
,从内容值的大小来看,我确定您需要
patternContentUnits=“userSpaceOnUse”
来为我修复它

编辑:正在工作