调整 svg-shape 大小时保持 svg 图案缩放

Question

我有一个应用于多边形的 svg 图案。它工作正常。当我在 svg-polygon 上设置另一个大小时，我不想缩放图案。

我已经尝试了所有我能想到的与 viewBox、patternUnits 和 patternContentUnits 的组合。目标是使多边形负责任地工作，例如与其父元素一起缩放。谁能指出我正确的方向？

<svg width="1000" fill="#ccc" viewBox="0 0 1440 60">
  <defs>
    <pattern id="pattern" x="0" y="0" width="900" height="600" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <svg x="0" y="0" width="900.4" height="600" viewBox="0 0 900.4 600">
      <!-- pattern code -->
      </svg>
    </pattern>
  </defs>

  <polygon points="0,0 1440,0 1440,20 0,60" x="0" y="0" stroke="#bbb" fill="url(#pattern)" />
</svg>

<svg width="500" fill="#ccc" viewBox="0 0 1440 60">
  <defs>
    <pattern id="pattern" x="0" y="0" width="900" height="600" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <svg x="0" y="0" width="900.4" height="600" viewBox="0 0 900.4 600">
      <!-- pattern code -->
      </svg>
    </pattern>
  </defs>

  <polygon points="0,0 1440,0 1440,20 0,60" x="0" y="0" stroke="#bbb" fill="url(#pattern)" />
</svg>

完整示例：https://codepen.io/anderssonola/pen/QqxKjJ

Answer 1

您始终可以适当地缩放图案和调整多边形的大小，例如

<polygon transform="scale(2)" points="0,0 720,0 720,10 0,30" stroke="#bbb" fill="url(#pattern)" />

Answer 2

我通过将图案应用于 <rect> 然后使用 css clip-path 创建多边形暂时解决了问题，但图案无法缩放。我仍然更愿意用纯 svg 来解决它，因为 IE 不支持 css clip-path。

.clip {
  background: gray;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0% 100%);
  margin-bottom: 1em; 
}

.clip.half {
  width: 50%;
}

svg {
  display: block;
  height: 50px;
  width: 100%
}

<div > 
  <svg>
    <defs>
      <pattern id="pattern" x="0" y="0" width="900" height="600" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
        <svg x="0" y="0" width="900.4" height="600"  >
        <!-- pattern code -->
        </svg>
      </pattern>
      <rect width="100%" height="50" fill="url(#pattern)" id="pattern-md"/>
    </defs>
  </svg>
</div>

<div class="clip">
  <svg>
     <use href="#pattern-md"/>
  </svg>
</div>

<div class="clip half" >
  <svg>
     <use href="#pattern-md" />
  </svg>
</div>

工作示例：https://codepen.io/anderssonola/pen/oGyBMj/

调整 svg-shape 大小时保持 svg 图案缩放

Keep svg pattern scaling when resizing svg-shape

html

svg

viewbox