SVG-带有图像背景的图案-图像不能填充相同的图像-适应它们所包含的形状

Question

我正在尝试根据某些条件填补各州的空缺。 我有一个模式，它正在工作，但似乎该模式根据区域的形状填充了区域。 当它们填充每个形状时，我希望线条相同。 您可以在下面的地图中看到，在每个状态下，线条的程度不同，大小也不相同。 这可能吗？ 我是SVG的新手。

模式：

<defs>
    <pattern id="pattern-stripe" width="5" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(75)">
        <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
    </pattern>
    <mask id="mask-stripe">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
    </mask>   
    <pattern id="other" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/other-stripe.png" />
    </pattern>
    <pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/blue-stripe.png" />
    </pattern>
    <pattern id="orange" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/orange-stripe.png" />
    </pattern>


</defs>

Answer 1

我试图在CodePen中复制该错误，但是如果没有完整的SVG代码，它将无法正常工作。 但是，我认为，如果将“ preserveAspectRatio="none"替换preserveAspectRatio="none" preserveAspectRatio="xMidYMid meet" ，它将解决您的问题。 如果没有，但是取得了进展，请在此处尝试其他解决方案。

Answer 2

您需要preserveAspectRatio="xMinYMin slice" 。 Meet将更改您的纵横比，直到高度或宽度的最小值适合边界框。 切片会将填充内容裁剪到可用空间。

Answer 3

您的问题是您的模式正在使用patternContentUnits="objectBoundingBox" 。 这意味着将对图案中的条纹图像进行缩放，以匹配图案所应用到的形状的大小。

演示：

 <svg> <defs> <pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" /> </pattern> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#blue)"/> <rect x="175" y="25" width="100" height="100" fill="url(#blue)"/> </svg> 

要解决此问题，您需要使用patternContentUnits ，它们与应用图案的形状的大小无关。 您可以通过指定patternContentUnits="userSpaceOnUse" 。

 <svg> <defs> <pattern id="blue" height="100%" width="100%" patternContentUnits="userSpaceOnUse"> <image height="150" width="150" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" /> </pattern> </defs> <rect x="0" y="0" width="150" height="150" fill="url(#blue)"/> <rect x="175" y="25" width="100" height="100" fill="url(#blue)"/> </svg>