Question

我正在尝试通过在背景属性中创建原始svg来在原始SVG中平铺六边形。我没想到它会像现在这么难。最大的问题是找到一种方法从左侧和顶部偏移绿色和蓝色元素而不切断它们。或者也许有。我尝试将svg元素嵌套在一起，这样我就可以访问x和y属性，但它们并没有让生活变得更轻松。我很困惑。示例代码位于底部，由于css文件中的换行符，无法读取。

这是我正在使用的SVG。

body { 
background: url('data:image/svg+xml;utf8,
    <svg width="288px" height="332.56px" viewBox="0 0 288 332.56" preserveAspectRatio="xMinYMin"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
        <svg x="0px" y="0px">
            <polygon style="fill:red;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
        </svg>
        <svg x="0px" y="166.28px">
            <polygon style="fill:grey;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
        </svg>
    </svg>'), url('data:image/svg+xml;utf8,
    <svg width="288px" height="332.56px" viewBox="0 0 288 332.56" preserveAspectRatio="xMinYMin"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
        <svg x="144px" y="-83.14px">
            <polygon style="fill:green;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28"  />
        </svg>
        <svg x="144px" y="83.14px">
            <polygon style="fill:blue;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
        </svg>
    </svg>');
background-repeat: "repeat";
}

以下是示例代码：

的test.html

<html><head><link rel="stylesheet" href="./test.css"></head><body> Hi</body></html>

test.css：

body { 
color: red;
background: url('data:image/svg+xml;utf8,<svg width="288px" height="332.56px" viewBox="0 0 288 332.56" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" version="1.1"><svg x="0px" y="0px"><polygon style="fill:red;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" /></svg><svg x="0px" y="166.28px"><polygon style="fill:grey;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" /></svg></svg>'), url('data:image/svg+xml;utf8,<svg width="288px" height="332.56px" viewBox="0 -83.14 288 332.56" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" version="1.1"><svg x="144px" y="0"><polygon style="fill:green;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28"  /></svg><svg x="144px" y="166.28px"><polygon style="fill:blue;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" /></svg></svg>');
background-repeat: "repeat";
}

Answer 1

您需要调整svg的大小并保留一个空格，以便它们可以重叠

＆＃13;

svg {box-shadow:0 0 0 2px;}

＆＃13;

 <svg width="289px" height="332.56px" viewBox="0 0 289 332.56" preserveAspectRatio="xMinYMin"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
        <svg x="0px" y="0px">
            <polygon style="fill:red;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
        </svg>
        <svg x="0px" y="166.28px">
            <polygon style="fill:grey;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
   </svg>
</svg>


    <svg width="289px" height="332.56px" viewBox="0 0 289 332.56" preserveAspectRatio="xMinYMin"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
        <svg x="0px" y="0">
            <polygon style="fill:green;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28"  />
        </svg>
        <svg x="0px" y="166.28px">
            <polygon style="fill:blue;stroke:#000000;stroke-width:0px" points="144,166.28 48,166.28 0,83.14 48,0 144,0 192,83.14 144,166.28" />
        </svg>
</svg>

＆＃13;

＆＃13; 然后使用background-position：

＆＃13;

html {
  background: url(data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjI4OXB4IiBoZWlnaHQ9IjMzMi41NnB4IiB2aWV3Qm94PSIwIDAgMjg5IDMzMi41NiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iDQogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiPg0KICAgICAgICA8c3ZnIHg9IjBweCIgeT0iMHB4Ij4NCiAgICAgICAgICAgIDxwb2x5Z29uIHN0eWxlPSJmaWxsOnJlZDtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MHB4IiBwb2ludHM9IjE0NCwxNjYuMjggNDgsMTY2LjI4IDAsODMuMTQgNDgsMCAxNDQsMCAxOTIsODMuMTQgMTQ0LDE2Ni4yOCIgLz4NCiAgICAgICAgPC9zdmc+DQogICAgICAgIDxzdmcgeD0iMHB4IiB5PSIxNjYuMjhweCI+DQogICAgICAgICAgICA8cG9seWdvbiBzdHlsZT0iZmlsbDpncmV5O3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowcHgiIHBvaW50cz0iMTQ0LDE2Ni4yOCA0OCwxNjYuMjggMCw4My4xNCA0OCwwIDE0NCwwIDE5Miw4My4xNCAxNDQsMTY2LjI4IiAvPg0KICAgPC9zdmc+DQo8L3N2Zz4=), url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjg5cHgiIGhlaWdodD0iMzMyLjU2cHgiIHZpZXdCb3g9IjAgMCAyODkgMzMyLjU2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiINCiAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+DQogICAgICAgIDxzdmcgeD0iMHB4IiB5PSIwIj4NCiAgICAgICAgICAgIDxwb2x5Z29uIHN0eWxlPSJmaWxsOmdyZWVuO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowcHgiIHBvaW50cz0iMTQ0LDE2Ni4yOCA0OCwxNjYuMjggMCw4My4xNCA0OCwwIDE0NCwwIDE5Miw4My4xNCAxNDQsMTY2LjI4IiAgLz4NCiAgICAgICAgPC9zdmc+DQogICAgICAgIDxzdmcgeD0iMHB4IiB5PSIxNjYuMjhweCI+DQogICAgICAgICAgICA8cG9seWdvbiBzdHlsZT0iZmlsbDpibHVlO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowcHgiIHBvaW50cz0iMTQ0LDE2Ni4yOCA0OCwxNjYuMjggMCw4My4xNCA0OCwwIDE0NCwwIDE5Miw4My4xNCAxNDQsMTY2LjI4IiAvPg0KICAgICAgICA8L3N2Zz4NCjwvc3ZnPg==) 145px 84px;
  min-height: 100%;
}

＆＃13;

为页面背景细分SVG？

1 个答案: