如何翻转SVG图案中的每个其他重复？

huangapple
go评论102阅读模式
英文:

How do I flip every other repeat in a SVG pattern?

问题

我想创建一个SVG图案，其中每隔一个水平重复与原始图案相镜像。我应该如何做，是否有子图案或可用的图案元素？

这是我迄今为止尝试的代码：

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="148mm" height="148mm" version="1.1" style="shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 14880 14880" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="pattern1" xlink:href="#subpattern1" patternTransform="translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)" />
    <pattern id="subpattern1" patternUnits="userSpaceOnUse" height="96" width="56">
      <image x="0" y="0" height="96" width="56" xlink:href="myimage.png" />
    </pattern>
  </defs>
  <g>
    <path style="fill:url(#pattern1)" stroke="#000000" stroke-width="0.00" d="M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z " />
  </g>
</svg>

请注意，这是您提供的代码，我没有进行任何翻译。

英文:

I want to make a SVG pattern where every other horizontal repeat is mirrored compared to the original. How would I do that, is there subpatterns or a pattern element that can be used?

This is the code I've tried with so far.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xml:space=&quot;preserve&quot; width=&quot;148mm&quot; height=&quot;148mm&quot; version=&quot;1.1&quot; style=&quot;shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd&quot; viewBox=&quot;0 0 14880 14880&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;`
  &lt;defs&gt;
    &lt;pattern id=&quot;pattern1&quot; xlink:href=&quot;#subpattern1&quot; patternTransform=&quot;translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)&quot; /&gt;
    &lt;pattern id=&quot;subpattern1&quot; patternUnits=&quot;userSpaceOnUse&quot; height=&quot;96&quot; width=&quot;56&quot;&gt;
      &lt;image x=&quot;0&quot; y=&quot;0&quot; height=&quot;96&quot; width=&quot;56&quot; xlink:href=&quot;myimage.png&quot; /&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;g&gt;
    &lt;path style=&quot;fill:url(#pattern1)&quot; stroke=&quot;#000000&quot; stroke-width=&quot;0.00&quot; d=&quot;M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z &quot;/&gt;
  &lt;/g&gt;
&lt;/svg&gt;

<!-- end snippet -->

答案1

得分: 0

在这个模式中，我会使用一个transform=&quot;scale(-1,1)&quot;的图像。为了使它工作，我会为模式使用一个viewBox属性：

&lt;pattern ..... height=&quot;96&quot; width=&quot;112&quot; viewBox=&quot;-56 0 112 96&quot;&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

svg{background:silver}

<!-- language: lang-html -->

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xml:space=&quot;preserve&quot; width=&quot;148mm&quot; height=&quot;148mm&quot; version=&quot;1.1&quot; style=&quot;shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd&quot; viewBox=&quot;0 0 14880 14880&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  &lt;defs&gt;
    &lt;pattern id=&quot;pattern1&quot; xlink:href=&quot;#subpattern1&quot; patternTransform=&quot;translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)&quot; /&gt;
    &lt;pattern id=&quot;subpattern1&quot; patternUnits=&quot;userSpaceOnUse&quot; height=&quot;96&quot; width=&quot;112&quot; viewBox=&quot;-56 0 112 96&quot;&gt;
      &lt;image id=&quot;img&quot; x=&quot;0&quot; y=&quot;0&quot; height=&quot;96&quot; width=&quot;56&quot; xlink:href=&quot;https://assets.codepen.io/222579/book_red.jpg&quot; /&gt;
      &lt;use href=&quot;#img&quot; transform=&quot;scale(-1,1)&quot;/&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;g&gt;
    &lt;path style=&quot;fill:url(#pattern1)&quot; stroke=&quot;#000000&quot; stroke-width=&quot;0.00&quot; d=&quot;M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z &quot;/&gt;
  &lt;/g&gt;
&lt;/svg&gt;

<!-- end snippet -->

英文:

Inside the pattern I would use the image with a transform=&quot;scale(-1,1)&quot;. In order to make it work I would use a viewBox attribute for the pattern

&lt;pattern ..... height=&quot;96&quot; width=&quot;112&quot; viewBox=&quot;-56 0 112 96&quot;&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

svg{background:silver}

<!-- language: lang-html -->

&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xml:space=&quot;preserve&quot; width=&quot;148mm&quot; height=&quot;148mm&quot; version=&quot;1.1&quot; style=&quot;shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd&quot; viewBox=&quot;0 0 14880 14880&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
  &lt;defs&gt;
    &lt;pattern id=&quot;pattern1&quot; xlink:href=&quot;#subpattern1&quot; patternTransform=&quot;translate(5958.89 8242.19) scale(37.979 37.979) rotate(0.00 1063.39 1822.99)&quot; /&gt;
    &lt;pattern id=&quot;subpattern1&quot; patternUnits=&quot;userSpaceOnUse&quot; height=&quot;96&quot; width=&quot;112&quot; viewBox=&quot;-56 0 112 96&quot;&gt;
      &lt;image id=&quot;img&quot; x=&quot;0&quot; y=&quot;0&quot; height=&quot;96&quot; width=&quot;56&quot; xlink:href=&quot;https://assets.codepen.io/222579/book_red.jpg&quot; /&gt;
      &lt;use href=&quot;#img&quot; transform=&quot;scale(-1,1)&quot;/&gt;
    &lt;/pattern&gt;
  &lt;/defs&gt;
  &lt;g&gt;
    &lt;path style=&quot;fill:url(#pattern1)&quot; stroke=&quot;#000000&quot; stroke-width=&quot;0.00&quot; d=&quot;M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z &quot;/&gt;
  &lt;/g&gt;
&lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月5日 17:07:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76404942.html
  • svg
  • svg-pattern
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定