主页 / 问题 / 1141071
Accepted
Leks
Asked:2020-06-15 05:07:34 +0000 UTC2020-06-15 05:07:34 +0000 UTC

由于图案中没有足够的空间放置图形

  • 772

<svg viewBox="0 0 1000 400" width='1000' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='10' y='10' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="10" cy="10" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="2"/>
</svg>

svg

1 个回答

  1. Best Answer

    想象一下，图案是一块瓷砖，你将把它放在一定大小的墙上。此处和此处的理论 在您的示例中，正方形（墙）尺寸200 х 200 px为 ，因此对于
    40 x 40 px图案尺寸（一个瓷砖），将有 5 个瓷砖宽和 5 行高。

    图案内的一切，再次与瓷砖类比，就是它的图案，超出瓷砖边界的东西将被切断。

    为了更容易计算圆心的位置及其半径，请将其放在图案的中心。

    <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
</pattern>

    我选择了半径而18px不是20px允许1px边缘周围的间隙。

    一瓦

    <svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="40" height="40" fill="url(#a)" stroke="black" stroke-width="0.5px"/>
</svg>

    在 200 x 200px 正方形中多次放置图案的示例

    <svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="0.5"/>
</svg>

    半径示例（如问题所示）15px

    <svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="0.5"/>
</svg>

    图案动画示例

    使用点阵图案和蒙版动画

    <svg viewbox="0 0 100 100">
        <defs>

            <pattern
                    id="dotted-pattern"
                    viewbox="0,0,100,100"
                    height="3.125%"
                    width="3.125%">
                <circle cx="50" cy="50" fill="#10446D" r="12"/>
                    
            </pattern>
            <mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
                <circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
            <animate
                        attributeName="r"
                        values="0.01; 38.48"
                        dur="3s"
                        begin="0s"
                        repeatCount="1"
                        fill="freeze" />
          </circle>
            </mask>
        </defs>
    
        <rect
                width="74"
                height="74"
                y="13"
                x="13"
                mask="url(#circle-mask)"
                fill="url(#dotted-pattern)"></rect>
        
        
    </svg>

    使用旋转和颜色变化的 SMIL 动画

    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="350">
<defs>
<pattern id="motif" x="0" y="0" width="30" height="30" overflow="visible" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="30" height="30" style="stroke:yellow;stroke-width:1;fill:yellow"/>
<circle cx="22" cy="15" r="7" style="stroke:black;stroke-width:1;fill:green">
<animateTransform begin="GO.click" attributeName="transform" type="rotate" values="0,15,15;360,15,15" repeatCount="2" dur="2s"/>
<animate begin="GO.click" attributeName="fill" values="green;red;green" repeatCount="2" dur="2s"/>
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#motif)"/>
<rect id="GO" x="210" y="330" width="50" height="18" opacity="0.3"/>
<text x="235" y="345" text-anchor="middle" font-size="15" fill="white" pointer-events="none">GO</text>
</svg>

    更复杂、复杂的图案动画

    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="350">
<defs>
<pattern id="motif" x="0" y="0" width="30" height="30" overflow="visible" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet">
<animate begin="GO.click" attributeName="width" values="30;8;30" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="height" values="30;8;30" repeatCount="1" dur="4s"/>
<rect x="0" y="0" width="30" height="30" style="stroke:black;stroke-width:1;fill:yellow">
<animate begin="GO.click" attributeName="width" values="30;8;30" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="height" values="30;8;30" repeatCount="1" dur="4s"/>
</rect>
<circle cx="15" cy="15" r="13" style="stroke:black;stroke-width:1;fill:green">
<animate begin="GO.click" attributeName="r" values="13;2;13" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="cx" values="15;4;15" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="cy" values="15;4;15" repeatCount="1" dur="4s"/>
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#motif)"/>
<rect id="GO" x="210" y="330" width="50" height="18" fill="black"/>
<text x="235" y="345" text-anchor="middle" font-size="15" fill="white" pointer-events="none">GO</text>
</svg>

    • 3

相关问题