将SVG从238更改为266,现在我被卡住了

时间:2017-10-12 11:02:09

标签: svg

这原本是238,我想把它改成266,现在我被卡住了。

我以前做过这件事,但我忘记了怎么做。

我知道7次进入266次38次。看,我忘了怎么做所有这些数学,你应该如何计算它。

我现在很困惑。

我认为它应该均匀适合,还是不适合?

 <svg width="266" height="266" viewBox="0 0 266 266">
          <rect x="0" y="0" width="266" height="266" fill="blue" />
          <rect x="7" y="7" width="224" height="224" fill="black" />
          <rect x="14" y="14" width="210" height="210" fill="red" />
          <rect x="21" y="21" width="196" height="196" fill="black" />
          <rect x="28" y="28" width="182" height="182" fill="yellow" />
          <rect x="35" y="35" width="168" height="168" fill="black" />
          <rect x="42" y="42" width="154" height="154" fill="orange" />
          <rect x="49" y="49" width="140" height="140" fill="black" />
          <rect x="56" y="56" width="126" height="126" fill="lime" />
          <rect x="63" y="63" width="112" height="112" fill="black" />
          <rect x="70" y="70" width="98" height="98" fill="teal" />
          <rect x="77" y="77" width="84" height="84" fill="black" />
          <rect x="84" y="84" width="70" height="70" fill="silver" />
          <rect x="91" y="91" width="56" height="56" fill="black" />
          <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
          <rect x="105" y="105" width="28" height="28" fill="black" />
          <rect x="112" y="112" width="14" height="14" fill="gold" />
        </svg>

1 个答案:

答案 0 :(得分:0)

假设原件看起来像这样:

<svg width="238" height="238" viewBox="0 0 238 238">
  <rect x="0" y="0" width="238" height="238" fill="blue" />
  <rect x="7" y="7" width="224" height="224" fill="black" />
  <rect x="14" y="14" width="210" height="210" fill="red" />
  <rect x="21" y="21" width="196" height="196" fill="black" />
  <rect x="28" y="28" width="182" height="182" fill="yellow" />
  <rect x="35" y="35" width="168" height="168" fill="black" />
  <rect x="42" y="42" width="154" height="154" fill="orange" />
  <rect x="49" y="49" width="140" height="140" fill="black" />
  <rect x="56" y="56" width="126" height="126" fill="lime" />
  <rect x="63" y="63" width="112" height="112" fill="black" />
  <rect x="70" y="70" width="98" height="98" fill="teal" />
  <rect x="77" y="77" width="84" height="84" fill="black" />
  <rect x="84" y="84" width="70" height="70" fill="silver" />
  <rect x="91" y="91" width="56" height="56" fill="black" />
  <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
  <rect x="105" y="105" width="28" height="28" fill="black" />
  <rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>

然后,要将其扩展到266x266,您需要做的就是更新widthheight属性。

<svg width="266" height="266" viewBox="0 0 238 238">

由于SVG有viewBox,浏览器会自动为您缩放内容。

<svg width="266" height="266" viewBox="0 0 238 238">
  <rect x="0" y="0" width="238" height="238" fill="blue" />
  <rect x="7" y="7" width="224" height="224" fill="black" />
  <rect x="14" y="14" width="210" height="210" fill="red" />
  <rect x="21" y="21" width="196" height="196" fill="black" />
  <rect x="28" y="28" width="182" height="182" fill="yellow" />
  <rect x="35" y="35" width="168" height="168" fill="black" />
  <rect x="42" y="42" width="154" height="154" fill="orange" />
  <rect x="49" y="49" width="140" height="140" fill="black" />
  <rect x="56" y="56" width="126" height="126" fill="lime" />
  <rect x="63" y="63" width="112" height="112" fill="black" />
  <rect x="70" y="70" width="98" height="98" fill="teal" />
  <rect x="77" y="77" width="84" height="84" fill="black" />
  <rect x="84" y="84" width="70" height="70" fill="silver" />
  <rect x="91" y="91" width="56" height="56" fill="black" />
  <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
  <rect x="105" y="105" width="28" height="28" fill="black" />
  <rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>