调整svg-shape

Question

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

我已尝试过使用viewBox，patternUnits和patternContentUnits可以想到的所有组合。目标是使多边形负责任地工作，例如用它的父元素缩放。谁能指出我正确的方向？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

完整示例：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)" />