Question

所以，我有一个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>

在JSFiddle：http://jsfiddle.net/2pwr8wo0/

好像PNG放大了或者其他东西，但我无法弄清楚如何解决它。

Answer 1

从内容值的大小开始，我确定您需要使用patternContentUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse"此更改会为我修复此内容。

修改：工作jsFiddle

获取大图像以模式化SVG

1 个答案: