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

Stack Overflow用户

提问于 2018-12-11 15:34:34

回答 3查看 810关注 0票数 0

我正在尝试根据特定的标准来填充州的区域。我有一个模式，它正在工作，但它似乎填充了基于区域形状的区域。我想有相同的线条，当他们填充每个单一的形状。您可以在下面的地图中看到，线条在每个州的度数不同，大小也不相同。这个是可能的吗？我是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>

svg

charts

mapping

html

css

云点播特惠1元起

提供三端 SDK 、云 API、控制台等多种上传方式，弱网环境下文件上传成功率达到 99.5%

回答 3

Stack Overflow用户

发布于 2018-12-11 16:00:40

我尝试在CodePen中复制这个错误，但是没有完整的SVG代码，它不能工作。然而，我认为如果你用preserveAspectRatio="xMidYMid meet"替换preserveAspectRatio="none"，它会解决你的问题。如果没有，但它取得了进展，请尝试其他解决方案here。

票数 0

Stack Overflow用户

发布于 2018-12-11 17:11:11

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

票数 0

Stack Overflow用户

发布于 2018-12-12 04: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>