在调整 svg 形状大小时保持 svg 模式缩放

Question

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

我已经尝试了我能想到的所有组合，包括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

我通过将模式应用于<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/

Answer 2

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

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