SVG -带有图像背景的图案-图像填充不同-适应它们所包含的形状
SVG -带有图像背景的图案-图像填充不同-适应它们所包含的形状
提问于 2018-12-11 23:34:34
我正在尝试根据特定的标准来填充州的区域。我有一个模式，它正在工作，但它似乎填充了基于区域形状的区域。我想有相同的线条，当他们填充每个单一的形状。您可以在下面的地图中看到，线条在每个州的度数不同，大小也不相同。这个是可能的吗？我是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>回答 3
Stack Overflow用户
发布于 2018-12-12 00:00:40
我尝试在CodePen中复制这个错误，但是没有完整的SVG代码，它不能工作。然而，我认为如果你用preserveAspectRatio="xMidYMid meet"替换preserveAspectRatio="none"，它会解决你的问题。如果没有，但它取得了进展，请尝试其他解决方案here。
Stack Overflow用户
发布于 2018-12-12 01:11:11
你想要preserveAspectRatio="xMinYMin slice"。Meet将更改您的纵横比，直到最小的高度或宽度适合边界框。切片会将填充裁剪到可用空间。
Stack Overflow用户
发布于 2018-12-12 12:39:43
您的问题是您的模式正在使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53727456
复制相关文章
相似问题
腾讯云开发者
