我对svg操作有一个3步的要求。
- 我想从我的机器上传svg
- 我想用网格模式填充svg
- 保存那个被操纵的svg
线索将有助于
到目前为止我的代码
我已经初始化了一个svg，它必须由模式填充并初始化要填充在主svg 中的模式标签
点击按钮，只有甜甜圈必须填写
<html>
<head>
<!-- <script type="text/javascript" src="svg.js"></script> -->
<!-- <script type="text/javascript" src="script.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<script src="svg.select.js"></script>
<!-- <script src="script.js"></script> -->
</head>
<style>
.patternid{ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSIjMDAwMDAwIiAvPgogIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjNTU5NGU3Ii8+Cjwvc3ZnPg==")};
</style>
<body>
<svg id="patternid" height="8" width="8" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="crosshatch" patternUnits="userSpaceOnUse" width="8" height="8">
<image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path fill='#fff' d='M0 0h8v8h-8z'/><path d='M0 0l8 8zm8 0l-8 8z' stroke-width='.5' stroke='#aaa'/></svg>" x="0" y="0" width="8" height="8">
</image>
</pattern>
</defs>
</svg>
<button onclick="getsvg()">HERE</button>
<div >
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<svg class="svgimage" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g ><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)">
<path d="M4523.9,4692.3C2296.6,4471.9,510.3,2894.4,161.4,841.6C-133.7-893,650.2-2633.4,2181.6-3647.3c2351.8-1552.5,5616-877.8,7066.9,1460.5c308.6,500.3,517.5,1065.7,615.3,1677.1c47.9,293.3,47.9,950.7,1.9,1245.9c-157.2,985.2-613.3,1863-1328.3,2560.7C7765,4046.4,6820.1,4502.5,5704.6,4667.4C5465,4701.9,4769.2,4717.2,4523.9,4692.3z M5616.4,4368.4C7904.9,4069.4,9607,2246.6,9603.1,96c-1.9-569.3-90.1-707.3-619.1-967.9c-607.6-299-739.9-444.7-845.3-937.3c-26.8-124.6-72.8-274.1-101.6-331.6c-97.7-199.3-297.1-358.4-532.8-423.6c-51.7-13.4-272.2-34.5-488.8-44.1s-421.7-26.8-456.2-36.4c-128.4-38.3-239.6-124.6-488.8-373.8c-205.1-207-276-266.4-377.6-314.3c-295.2-138-682.3-130.3-960.3,19.2c-67.1,34.5-203.2,141.8-312.4,245.3c-346.9,325.8-438.9,385.3-701.5,452.3c-107.3,26.8-174.4,30.7-488.8,15.3c-661.3-28.7-751.4-24.9-874,36.4c-120.8,57.5-241.5,178.3-304.8,299c-21.1,44.1-61.3,172.5-86.3,285.6c-53.7,249.2-103.5,381.4-193.6,532.8c-130.3,218.5-274.1,323.9-624.8,460C711.5-820.2,588.9-737.8,491.1-542.2c-80.5,161-111.2,615.3-69,1040.8c145.7,1427.9,1035,2693,2380.6,3381.1c490.7,253,1079.1,431.3,1606.2,488.8c99.7,9.6,212.8,23,249.2,26.8C4776.9,4408.6,5447.7,4391.4,5616.4,4368.4z M9384.6-1182.4c-484.9-1429.9-1755.7-2532-3327.4-2882.7c-354.6-78.6-607.6-103.5-1054.2-103.5c-446.6,0-699.6,24.9-1054.2,103.5c-1186.4,264.5-2210,956.4-2861.6,1932c-61.3,92-164.8,274.1-231.9,406.3C734.5-1491,583.1-1117.3,600.4-1100c5.8,3.8,44.1-9.6,86.3-30.7c42.2-21.1,164.8-72.8,276-113.1c109.2-42.2,235.8-93.9,281.8-116.9c199.3-103.5,331.6-295.2,394.8-576.9c109.3-492.6,235.8-703.4,527.1-875.9c161-93.9,256.8-111.2,584.6-103.5c168.7,3.8,444.7,9.6,613.3,9.6c306.7,1.9,306.7,1.9,435.1-59.4c95.8-44.1,182.1-111.2,335.4-258.8c308.6-295.2,429.3-375.7,695.8-458.1c189.8-59.4,596.1-65.2,774.3-9.6c272.2,82.4,475.3,222.3,737.9,507.9c226.2,249.2,233.8,251.1,699.6,272.2c279.8,11.5,425.5,26.8,534.7,53.7c452.4,116.9,749.4,442.8,847.2,929.6c61.3,300.9,86.3,358.4,210.8,481.1c97.7,99.7,168.7,143.8,460,291.3c189.8,95.8,346.9,172.5,348.8,170.6C9447.9-988.8,9421.1-1077,9384.6-1182.4z"/>
<path d="M4207.6,3956.3c-61.3-59.4-63.2-149.5-3.8-207c32.6-34.5,136.1-63.3,507.9-143.8c515.6-111.2,540.5-111.2,596.1,3.8c38.3,82.4-9.6,176.3-107.3,201.3c-145.7,38.3-872.1,193.6-908.5,193.6C4270.9,4004.2,4232.5,3983.1,4207.6,3956.3z"/>
<path d="M6178,3268.2c-26.8-34.5-49.8-141.8-90.1-440.8c-28.8-218.5-47.9-417.9-42.1-444.7c17.2-67.1,128.4-116.9,191.7-88.2c26.8,11.5,59.4,40.2,74.7,65.2c24.9,40.2,128.4,701.5,128.4,824.2C6440.6,3300.8,6250.8,3362.1,6178,3268.2z"/>
<path d="M7423.8,3227.9c-90.1-63.2-78.6-118.8,99.7-494.5c90.1-191.7,182.1-364.2,205.1-381.4c86.3-74.8,245.3-5.7,245.3,107.3c0,70.9-333.5,751.4-379.5,776.3C7538.8,3264.3,7471.8,3262.4,7423.8,3227.9z"/>
<path d="M4207.6,2658.7c-322-316.3-337.3-343.1-256.8-444.7c30.7-38.3,55.6-49.8,113.1-49.8c70.9,0,92,17.3,373.8,293.3c245.3,239.6,297.1,300.9,297.1,345c0,76.7-78.6,147.6-161,147.6C4512.4,2950,4477.9,2921.3,4207.6,2658.7z"/>
<path d="M2128,2771.8c-70.9-36.4-107.3-113.1-86.3-180.2c26.8-76.7,718.8-542.4,805-542.4c118.8,0,191.7,162.9,109.3,245.3c-51.8,49.8-697.7,479.2-741.8,490.7C2193.1,2790.9,2154.8,2785.2,2128,2771.8z"/>
<path d="M4658,1847.9c-452.3-72.8-898.9-325.8-1140.4-644C2877.4,358.6,3396.9-726.2,4569.9-992.7c170.6-38.3,661.3-44.1,826.1-9.6c578.8,124.6,1025.4,442.8,1238.2,877.9c398.7,820.4-157.1,1727-1199.9,1955.1C5244.6,1872.8,4857.4,1882.4,4658,1847.9z M5319.3,1541.2C6078.3,1409,6586.2,797.5,6431,199.5c-222.3-852.9-1506.5-1217.1-2351.8-663.2C3485-74.6,3375.8,602,3828.1,1092.7C4173.1,1464.6,4752,1639,5319.3,1541.2z"/>
<path d="M7581,1589.1c-203.2-86.3-379.5-170.6-396.8-193.6c-69-84.3-24.9-214.7,78.6-237.7c44.1-9.6,130.3,19.2,389.1,126.5c408.3,168.7,429.3,178.3,467.7,237.7c55.6,86.3-21.1,222.3-124.6,220.4C7968.2,1740.6,7782.3,1671.6,7581,1589.1z"/>
<path d="M1687.1,945.1c-184-153.3-345-293.3-358.4-310.5c-67.1-88.2,13.4-233.8,126.5-233.8c47.9,0,126.5,55.6,402.5,287.5c189.8,157.2,354.6,302.8,364.2,323.9c30.7,57.5,24.9,105.4-19.2,162.9c-28.8,38.3-55.6,49.8-109.2,49.8C2030.2,1225,1984.2,1192.4,1687.1,945.1z"/>
<path d="M7715.2,257c-59.4-57.5-61.3-126.5-3.8-189.8c55.6-65.2,772.4-471.5,851-484.9c120.8-21.1,208.9,143.8,126.5,239.6c-59.4,67.1-808.8,483-870.2,483C7784.2,304.9,7742,285.8,7715.2,257z"/>
<path d="M2342.7-224.1c-24.9-17.2-51.8-49.8-61.3-74.7c-19.2-51.8,101.6-912.4,136.1-981.4c49.8-93.9,195.5-93.9,256.8,1.9c30.7,44.1,26.8,76.7-36.4,509.9c-38.3,254.9-78.6,479.2-90.1,500.2c-19.2,36.4-90.1,74.8-138,74.8C2396.3-193.4,2365.6-206.8,2342.7-224.1z"/>
<path d="M7167-636.2c-26.8-9.6-59.4-38.3-70.9-61.3c-13.4-23-65.2-247.3-118.8-496.4c-90.1-425.5-95.8-458.1-69-511.8c47.9-90.1,151.4-107.3,230-34.5c40.2,36.4,59.4,105.4,145.7,506c53.7,256.8,93.9,481.1,86.3,500.3C7345.3-651.5,7249.4-607.4,7167-636.2z"/>
<path d="M3816.6-1696.1c-463.8-283.7-507.9-333.5-387.2-454.3c30.7-30.7,74.7-55.6,99.7-55.6c46,0,816.5,461.9,856.8,513.7c36.4,47.9,28.8,151.4-15.3,195.5C4293.9-1420.1,4232.5-1443.1,3816.6-1696.1z"/>
<path d="M5328.9-1617.5c-55.6-28.8-86.3-103.5-70.9-170.6c7.7-30.7,139.9-162.9,360.4-358.4c279.8-249.2,358.4-308.6,404.4-308.6c101.6,0,176.3,116.9,138,218.5c-13.4,32.6-630.6,588.4-691.9,622.9C5417.1-1586.9,5388.3-1586.9,5328.9-1617.5z"/></g></g>
</svg>
</div>
<script>
function getsvg(){
$('.svgimage').addClass('patternid')
let mapContainer = SVG.select('#patternid');
let myMapObject = mapContainer.first();
console.log(myMapObject)
}
</script>
</body>
</html>我从这个答案中得到了SVG。你可以采取另一个svg和解决方案，它将在那里工作的模式。
<svg viewbox="200 190 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt"
x="0" y="0" width="10" height="10"
patternUnits="userSpaceOnUse" >
<g fill="none" stroke="#d3d3d3" stroke-width="0.5" >
<rect x="0" y="0" width="10" height="10" />
</g>
</pattern>
</defs>
<g fill="url(#patt)" stroke="orange" >
<path id="CD11110" class="OUTLINE CD11110" d="M 455 297 l 4 -2 1 0 1 0 3 -1 4 5 7 3 2 6 0 8 -11 2 -11 1 -8 0 -9 1 -8 1 -9 1 -9 -2 -10 -1 -9 1 -4 3 -2 3 -6 -6 -3 -4 -5 -6 -4 -5 -2 -5 5 -3 0 -6 0 -10 0 -9 1 -9 -3 -4 -2 0 -2 0 -1 -4 0 -9 -5 -9 1 -10 -1 -11 -1 -6 2 -6 5 -2 7 -3 10 -2 2 -1 3 0 1 0 4 -2 8 -1 3 6 4 1 3 8 3 10 1 6 3 5 0 9 0 7 -1 5 -6 3 -6 4 -1 5 6 4 5 3 5 4 9 1 10 0 4 4 3 4 5 10 1 3 z " />
<path id="CD11140" class="OUTLINE" d="M 477 316 l 0 9 5 5 -1 3 -4 5 -4 5 -5 4 -4 7 -3 4 -4 3 -4 10 -2 -1 -3 -7 -2 -5 -2 1 -1 0 -2 -1 -3 1 0 0 -3 1 -4 2 -5 -5 -6 -3 -10 -3 -4 -1 -3 -1 -2 2 -4 -1 -3 -1 -9 0 -2 2 -4 3 0 -7 1 -4 -2 -2 0 -1 6 -3 6 -4 -1 -2 -2 -5 2 -3 4 -3 9 -1 10 1 9 2 9 -1 8 -1 9 -1 8 0 11 -1 z " />
<path id="CD11170" class="OUTLINE" d="M 394 349 l 3 1 4 1 2 -2 3 1 4 1 10 3 6 3 5 5 4 -2 3 -1 0 0 3 -1 2 1 1 0 2 -1 2 5 3 7 2 1 5 9 6 2 2 9 -4 5 -4 5 -5 6 -3 4 -5 4 -5 5 -5 4 -5 3 -8 8 -5 8 -7 3 -7 -1 -10 -4 -3 -1 -6 -3 -6 -5 -5 -3 -6 -3 -9 -3 1 -5 0 -10 -2 -8 -6 -11 5 -2 4 -1 5 -4 5 -6 2 -5 3 -6 6 -5 0 -3 -2 -3 4 -3 2 -2 z " />
</g>
</svg>另一种带有彩色正方形网格的图案
<svg viewbox="200 190 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<g fill="#85D2FF" fill-opacity="0.7">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</g>
</pattern>
</defs>
<g stroke="#000" fill="url(#patt)" >
<path id="CD11110" class="OUTLINE CD11110" d="M 455 297 l 4 -2 1 0 1 0 3 -1 4 5 7 3 2 6 0 8 -11 2 -11 1 -8 0 -9 1 -8 1 -9 1 -9 -2 -10 -1 -9 1 -4 3 -2 3 -6 -6 -3 -4 -5 -6 -4 -5 -2 -5 5 -3 0 -6 0 -10 0 -9 1 -9 -3 -4 -2 0 -2 0 -1 -4 0 -9 -5 -9 1 -10 -1 -11 -1 -6 2 -6 5 -2 7 -3 10 -2 2 -1 3 0 1 0 4 -2 8 -1 3 6 4 1 3 8 3 10 1 6 3 5 0 9 0 7 -1 5 -6 3 -6 4 -1 5 6 4 5 3 5 4 9 1 10 0 4 4 3 4 5 10 1 3 z " />
<path id="CD11140" class="OUTLINE" d="M 477 316 l 0 9 5 5 -1 3 -4 5 -4 5 -5 4 -4 7 -3 4 -4 3 -4 10 -2 -1 -3 -7 -2 -5 -2 1 -1 0 -2 -1 -3 1 0 0 -3 1 -4 2 -5 -5 -6 -3 -10 -3 -4 -1 -3 -1 -2 2 -4 -1 -3 -1 -9 0 -2 2 -4 3 0 -7 1 -4 -2 -2 0 -1 6 -3 6 -4 -1 -2 -2 -5 2 -3 4 -3 9 -1 10 1 9 2 9 -1 8 -1 9 -1 8 0 11 -1 z " />
<path id="CD11170" class="OUTLINE" d="M 394 349 l 3 1 4 1 2 -2 3 1 4 1 10 3 6 3 5 5 4 -2 3 -1 0 0 3 -1 2 1 1 0 2 -1 2 5 3 7 2 1 5 9 6 2 2 9 -4 5 -4 5 -5 6 -3 4 -5 4 -5 5 -5 4 -5 3 -8 8 -5 8 -7 3 -7 -1 -10 -4 -3 -1 -6 -3 -6 -5 -5 -3 -6 -3 -9 -3 1 -5 0 -10 -2 -8 -6 -11 5 -2 4 -1 5 -4 5 -6 2 -5 3 -6 6 -5 0 -3 -2 -3 4 -3 2 -2 z " />
</g>
</svg>