使用React在HTML中的SVG路徑選擇器
P粉566048790
2023-09-01 23:22:48
<p>我正在创建一个绘画应用程序，用户可以在其中上传 SVG。填充不同的颜色，在 SVG 上绘制，然后将其擦除。
但不幸的是，我无法获取 SVG 的路径。
下面是 SVG 图像，如果我将鼠标悬停，我只想获取该悬停路径的路径并用所选颜色填充它。
我尝试了 Canvas 和 SVG 路径。但没有运气。 Canvas 有 <code>beginPath</code> 方法，我用它来绘制 SVG。</p>
<p>
<pre class="brush:html;toolbar:false;"><?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 1700.958 1665.465" version="1.1" viewBox="0 0 1700.958 1665.465">
<path d="m1513.2 1139.8c-26.153-30.132-56.498-59.804-65.177-98.747-8.427-37.811 5.355-76.49 14.693-114.09 56.957-229.31-58.146-353.75-87.878-496.05-15.142-72.474-9.009-147.86-20.97-220.93-29.911-182.72-171.51-241.89-320.12-132.43-147.64 108.75-123.16 181.45-483.47 252.99-88.995-59.945-189.74-102.38-294.8-124.17-111.64-23.153-172.69 17.2-163.28 158.8 8.583 129.18 37.822 256.96 86.269 377.02 30.527 75.648 16.839 87.913-34.322 140.78-179.3 185.28-73.066 498.76-60.49 575.34 2.287 13.924 0.269 32.532 19.737 46.026 1.759 1.219 13.887 5.396 14.184 6.197-67.176-181.3-104.34-548.52 79.79-603.4 61.886-18.444 131.22 8.857 183.26 41.542 257.68 161.82 123.45 419.31-58.637 357.74-55.016-18.603-98.227-65.393-118.66-119.76-5.287-14.07-20.984-31.816-30.857-20.483-15.51 17.803 35.984 153.01 163 172.85 49.186 7.681 101.08-2.912 148.26 12.974 73.549 24.764 114.77 106.14 185.8 137.4 65.406 28.785 156.22 11.175 196.79 83.733 0 0-3.499 11.757-7.51 27.81-2.093 8.377-3.125 16.632-6.25 24.668-1.385 3.562-2.051 7.989 0.434 10.893 2.477 2.896 19.459 9.475 23.947 4.731 5.93-6.268 5.238-12.255 13.439-43.876 1.223-4.715 10.797-40.662 15.055-47.799 31.31-52.474 76.742-96.59 130.65-125.43 187.18-100.14 320.96 47.778 305.22 172.81 11.295 8.527 28.921 1.05 35.493-11.483 15.008-28.622-12.236-137.59-100.55-203.31 127.02-222.64 129.58-237.64 158.19-244.84 32.165-8.094 60.481 28.138 60.919 61.302s-16.265 63.785-25.557 95.624c-32.546 111.52 41.641 242.54 154.01 272 12.355 2.904 23.129 1.979 30.484-7.232 3.591-4.497 5.456-10.145 5.553-15.898 2.46-146.26-50.772-292.82-146.66-403.31zm-1211.9-561.67c-25.164 18.839-47.112 34.551-77.022-14.31-44.141-72.11-49.261-113.47-57.34-148.24-3.901-16.789-7.783-34.537-2.703-51.013 14.845-48.147 90.31-29.854 120.54-12.506 19.466 11.171 88.639 40.987 91.489 112.78 1.801 45.376-41.495 88.24-74.962 113.29zm1098 469.88c-19.502 42.996-30.047 171.93-235.49 269.91-156.12 74.461-226.02 105.64-332.44 100.92-126.39-5.599-290.69-92.215-304.43-101.02-7.349-4.707-20.661-10.044-12.894-19.74 3.404-4.249 8.455-6.629 12.158-10.447 8.213-8.468 13.685-19.039 21.191-28.17 28.47-34.635 20.155-89.273 7.088-136.8-11.924-43.375-23.141-88.586-54.138-122.92-9.541-10.566-16.87-23.392-27.281-33.358-26.542-25.408 14.757-17.001 90.736-154.83 32.255-58.514 58.742-95.218 70.309-228.88 3.474-40.148 9.18-86.882-5.385-125.4-6.849-18.113-16.184-42.308-28.588-57.26-29.608-35.689 50.27-51.914 69.036-57.111 80.125-22.19 164.56-32.996 184.46-32.973 11.043 0.012 17.55 0.588 26.875-7.09 22.926-18.877 38.197-53.313 57.781-76.244 37.987-44.482 79.245-84.793 129.32-115.42 31.885-19.502 79.223-48.738 118.75-42.542 105.16 16.484 173.86 228.83 120.53 371.62-4.096 10.969-4.846 17.7 2.722 27.77 85.576 113.87 107.11 168.7 120.71 305.64 10.253 103.26-12.126 232.68-31.027 274.35z"/>
<path d="m456.34 1089.1c6.233 6.155 24.117 28.409 23.687 37.241-0.521 10.725-11.538 20.144-22.183 16.639-8.212-2.704-41.755-30.055-41.58-59.534 0.082-13.751 24.159-10.062 40.076 5.654z"/>
<path d="m364.88 1178.2c-7.345-5.237-8.654-15.525-11.611-23.041-9.543-24.251-25.954-19.429-21.943-33.675 4.8-17.047 16.421-12.089 27.571-2.876 8.766 7.243 17.658 14.623 24.019 24.048 3.625 5.372 16.063 35.604 2.387 36.536-6.622 0.452-14.567 3.183-20.423-0.992z"/>
<path d="m285.24 1225c-16.857-0.608-3.845-20.258-30.489-55.574-2.322-3.078-2.948-14.98-0.513-17.872 7.879-9.36 24.751 6.89 32.378 16.205 22.237 27.159 17.683 57.928-1.376 57.241z"/>
<path d="m1026.2 1178.3c-4.4-0.988-7.848-3.813-12.337-4.456-18.762-2.687-33.961 22.843-40.255 37.065-18.956 42.84-128.83 36.937-153.96-1.215-10.923-16.583-3.617-38.579 7.147-41.85 8.716-2.649 16.488 5.584 22.814 12.138 22.334 23.138 60.924 35.443 89.487 15.939 15.178-10.364 19.441-24.802 24.852-41.253 8.683-26.4-3.987-64.117-3.675-78.946 0.522-24.79-76.71-7.925-85.986-47.513-2.777-11.85 3.329-23.97 10.711-33.647 47.18-61.85 141.03-54.294 153.57-24.207 8.111 19.46-13.151 46.409-24.854 70.349-10.421 21.317-10.733 42.461-6.508 65.432 8.24 44.795 104.28 48.515 114.04 10.036 3.174-12.509 5.44-25.328 4.856-38.549-0.809-18.365 24.469-18.029 36.445-13.585 17.88 6.634 9.067 32.536 8.253 46.999-1.489 26.459-12.642 27.368-34.465 47.374-8.485 7.778-15.621 16.287-27.586 18.448-18.371 3.318-71.256 3.979-82.555 1.441z"/>
<path d="m1165.8 397.88c-21.478-4.91-35.042-12.902-108.76-50.389-26.837-13.646-80.673-20.143-36.401-87.37 24.263-36.844 56.284-74.62 94.725-97.025 25.309-14.751 60.416-26.014 88.841-13.614 18.62 8.125 26.483 29.966 30.368 48.385 5.297 25.112 11.916 49.994 13.473 75.765 4.213 69.703-13.356 140-82.243 124.25zm-4.224-214.33c-36.9-4.21-69.141 47.615-88.59 71.948-22.23 27.813-6.561 34.109 19.008 54.253 32.491 25.596 84.395 46.491 96.385 48.285 13.16 1.969 12.985-5.815 13.009-17.403 0.066-30.823-3.791-61.637-11.22-91.544-3.912-15.755-11.138-63.548-28.592-65.539z"/>
<path d="m1166.5 785.71c-33.999 14.871-29.684 37.645-42.067 56.304-16.539 24.921-75.594-27.122 6.865-72.599 21.582-11.903 35.962-34.673 72.665-21.82 51.524 18.043 50.424 51.761 27.029 56.366-30.105 5.925-31.815-32.543-64.492-18.251z"/>
<path d="m633.28 970.61c-2.789 4.104-3.766 9.821-7.137 13.623-3.642 4.108-13.067 7.727-18.335 5.324-14.615-6.668-18.012-16.788-10.953-30.893 28.664-57.276 61.815-66.413 124.58-52.86 11.553 2.495 22.771 8.339 27.733 21.337 4.857 12.725-12.617 19.396-22.681 18.288-15.94-1.756-52.004-35.434-93.206 25.181z"/>
<path d="m637.91 1188.6c-5.595 8.292-19.762 13.507-21.387 13.638-9.983 0.808-18.272-13.722-16.661-22.27 5.828-30.925 63.093-51.854 83.183-34.161 14.926 13.144 14.964 35.14-16.662 34.828-12.395-0.122-20.509-3.84-28.473 7.965z"/>
<path d="m717.36 1240.4c-0.134 10.242-9.212 14.252-17.947 15.986-10.358 2.056-18.298 2.074-24.009 12.648-4.116 7.621-13.043 13.583-21.119 16.241-19.047 6.269-33.744-8.64-25.868-23.381 2.274-4.255 5.724-7.743 9.124-11.165 10.586-10.651 25.384-34.309 42.111-31.688 10.141 1.589 20.158 2.509 29.361 7.443 7.688 4.12 8.458 5.321 8.347 13.916z"/>
<path d="m1275.1 912.52c-10.904 4.013-21.432 14.606-33.884 12.73-9.084-1.369-16.852-14.026-15.304-22.983 1.555-8.994 17.964-13.307 25.038-16.213 10.747-4.414 53.436-19.693 67.508-18.453 12.137 1.07 10.386 14.942 7.799 27.098-0.27 1.269-1.226 2.85-2.317 3.415-7.241 3.752-12.936 8.02-21.154 9.666-9.195 1.843-18.782 1.463-27.686 4.74z"/>
<path d="m668.03 1056.7c10.209 1.148 12.126 14.675 10.294 22.768-2.564 11.323-13.866 13.272-23.274 17.568-7.218 3.296-47.912 21.818-56.838 22.634-21.661 1.98-11-16.295-2.671-24.855 19.584-20.128 63.661-39.108 72.489-38.115z"/>
<path d="m1296.8 1072.5c-11.681 2.792-18.075-1.341-22.346-12.816-2.113-5.675 1.276-12.251 6.259-15.122 14.762-8.504 109.85 1.37 86.914 25.851-31.474 33.587-30.611-7.523-70.827 2.087z"/>
<path d="m1322.3 970.24c-12.939-2.531-26.178 5.846-40.296 10.184-6.817 2.094-12.979 0.065-18.47-2.172-5.583-2.276-2.596-11.062-0.187-14.872 3.723-5.888 10.783-8.09 17.196-9.706 62.161-15.659 62.235-19.071 71.428-14.475 7.399 6.185 9.197 14.436 6.721 23.097-0.961 3.362-5.687 4.732-9.737 5.523-7.9 1.543-15.893 1.635-26.655 2.421z"/>
</svg></pre>
</p>
我使用你的 SVG 創建了一個小演示：
選擇顏色。body中建立一個 CSS 自訂屬性來儲存所選顏色：--svg-fill-color。--svg-fill-color中。path指派一個mousedown eventListener。path（mousedown）時，將--svg-fill-color的值賦給>使用函數setColor(..)填滿路徑的顏色。一個相當簡單的演示，您可以將其擴展為您需要的任何內容。
注意：頁面關閉時顏色不會儲存，您需要注意：重寫 SVG、將值儲存在本機儲存中等。
更新在「herrstrietzel」註解後的程式碼中。
// Javascript // Get reference to all 'path' const paths = document.querySelectorAll('svg path'); const setColor = (element) => { // Assign currently selected color in --svg-fill-color to 'fill' of clicked 'path' element.style.fill = getComputedStyle(document.body).getPropertyValue("--svg-fill-color"); }; // Assign event listener to all 'path' paths.forEach((path, index)=>{ // Executes 'setColor(..)' when path is clicked path.addEventListener("click", (event) => { setColor(event.target) }); });/* CSS */ body { --svg-fill-color: black } /* default black */<!-- HTML --> <label for="color"> <input id="color" type="color" oninput="document.body.style.setProperty('--svg-fill-color', this.value);"> Path Color </label> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 1700.958 1665.465" version="1.1" viewBox="0 0 1700.958 1665.465"> <path d="m1513.2 1139.8c-26.153-30.132-56.498-59.804-65.177-98.747-8.427-37.811 5.355-76.49 14.693-114.09 56.957-229.31-58.146-353.75-87.878-496.05-15.142-72.474-9.009-147.86-20.97-220.93-29.911-182.72-171.51-241.89-320.12-132.43-147.64 108.75-123.16 181.45-483.47 252.99-88.995-59.945-189.74-102.38-294.8-124.17-111.64-23.153-172.69 17.2-163.28 158.8 8.583 129.18 37.822 256.96 86.269 377.02 30.527 75.648 16.839 87.913-34.322 140.78-179.3 185.28-73.066 498.76-60.49 575.34 2.287 13.924 0.269 32.532 19.737 46.026 1.759 1.219 13.887 5.396 14.184 6.197-67.176-181.3-104.34-548.52 79.79-603.4 61.886-18.444 131.22 8.857 183.26 41.542 257.68 161.82 123.45 419.31-58.637 357.74-55.016-18.603-98.227-65.393-118.66-119.76-5.287-14.07-20.984-31.816-30.857-20.483-15.51 17.803 35.984 153.01 163 172.85 49.186 7.681 101.08-2.912 148.26 12.974 73.549 24.764 114.77 106.14 185.8 137.4 65.406 28.785 156.22 11.175 196.79 83.733 0 0-3.499 11.757-7.51 27.81-2.093 8.377-3.125 16.632-6.25 24.668-1.385 3.562-2.051 7.989 0.434 10.893 2.477 2.896 19.459 9.475 23.947 4.731 5.93-6.268 5.238-12.255 13.439-43.876 1.223-4.715 10.797-40.662 15.055-47.799 31.31-52.474 76.742-96.59 130.65-125.43 187.18-100.14 320.96 47.778 305.22 172.81 11.295 8.527 28.921 1.05 35.493-11.483 15.008-28.622-12.236-137.59-100.55-203.31 127.02-222.64 129.58-237.64 158.19-244.84 32.165-8.094 60.481 28.138 60.919 61.302s-16.265 63.785-25.557 95.624c-32.546 111.52 41.641 242.54 154.01 272 12.355 2.904 23.129 1.979 30.484-7.232 3.591-4.497 5.456-10.145 5.553-15.898 2.46-146.26-50.772-292.82-146.66-403.31zm-1211.9-561.67c-25.164 18.839-47.112 34.551-77.022-14.31-44.141-72.11-49.261-113.47-57.34-148.24-3.901-16.789-7.783-34.537-2.703-51.013 14.845-48.147 90.31-29.854 120.54-12.506 19.466 11.171 88.639 40.987 91.489 112.78 1.801 45.376-41.495 88.24-74.962 113.29zm1098 469.88c-19.502 42.996-30.047 171.93-235.49 269.91-156.12 74.461-226.02 105.64-332.44 100.92-126.39-5.599-290.69-92.215-304.43-101.02-7.349-4.707-20.661-10.044-12.894-19.74 3.404-4.249 8.455-6.629 12.158-10.447 8.213-8.468 13.685-19.039 21.191-28.17 28.47-34.635 20.155-89.273 7.088-136.8-11.924-43.375-23.141-88.586-54.138-122.92-9.541-10.566-16.87-23.392-27.281-33.358-26.542-25.408 14.757-17.001 90.736-154.83 32.255-58.514 58.742-95.218 70.309-228.88 3.474-40.148 9.18-86.882-5.385-125.4-6.849-18.113-16.184-42.308-28.588-57.26-29.608-35.689 50.27-51.914 69.036-57.111 80.125-22.19 164.56-32.996 184.46-32.973 11.043 0.012 17.55 0.588 26.875-7.09 22.926-18.877 38.197-53.313 57.781-76.244 37.987-44.482 79.245-84.793 129.32-115.42 31.885-19.502 79.223-48.738 118.75-42.542 105.16 16.484 173.86 228.83 120.53 371.62-4.096 10.969-4.846 17.7 2.722 27.77 85.576 113.87 107.11 168.7 120.71 305.64 10.253 103.26-12.126 232.68-31.027 274.35z"/> <path d="m456.34 1089.1c6.233 6.155 24.117 28.409 23.687 37.241-0.521 10.725-11.538 20.144-22.183 16.639-8.212-2.704-41.755-30.055-41.58-59.534 0.082-13.751 24.159-10.062 40.076 5.654z"/> <path d="m364.88 1178.2c-7.345-5.237-8.654-15.525-11.611-23.041-9.543-24.251-25.954-19.429-21.943-33.675 4.8-17.047 16.421-12.089 27.571-2.876 8.766 7.243 17.658 14.623 24.019 24.048 3.625 5.372 16.063 35.604 2.387 36.536-6.622 0.452-14.567 3.183-20.423-0.992z"/> <path d="m285.24 1225c-16.857-0.608-3.845-20.258-30.489-55.574-2.322-3.078-2.948-14.98-0.513-17.872 7.879-9.36 24.751 6.89 32.378 16.205 22.237 27.159 17.683 57.928-1.376 57.241z"/> <path d="m1026.2 1178.3c-4.4-0.988-7.848-3.813-12.337-4.456-18.762-2.687-33.961 22.843-40.255 37.065-18.956 42.84-128.83 36.937-153.96-1.215-10.923-16.583-3.617-38.579 7.147-41.85 8.716-2.649 16.488 5.584 22.814 12.138 22.334 23.138 60.924 35.443 89.487 15.939 15.178-10.364 19.441-24.802 24.852-41.253 8.683-26.4-3.987-64.117-3.675-78.946 0.522-24.79-76.71-7.925-85.986-47.513-2.777-11.85 3.329-23.97 10.711-33.647 47.18-61.85 141.03-54.294 153.57-24.207 8.111 19.46-13.151 46.409-24.854 70.349-10.421 21.317-10.733 42.461-6.508 65.432 8.24 44.795 104.28 48.515 114.04 10.036 3.174-12.509 5.44-25.328 4.856-38.549-0.809-18.365 24.469-18.029 36.445-13.585 17.88 6.634 9.067 32.536 8.253 46.999-1.489 26.459-12.642 27.368-34.465 47.374-8.485 7.778-15.621 16.287-27.586 18.448-18.371 3.318-71.256 3.979-82.555 1.441z"/> <path d="m1165.8 397.88c-21.478-4.91-35.042-12.902-108.76-50.389-26.837-13.646-80.673-20.143-36.401-87.37 24.263-36.844 56.284-74.62 94.725-97.025 25.309-14.751 60.416-26.014 88.841-13.614 18.62 8.125 26.483 29.966 30.368 48.385 5.297 25.112 11.916 49.994 13.473 75.765 4.213 69.703-13.356 140-82.243 124.25zm-4.224-214.33c-36.9-4.21-69.141 47.615-88.59 71.948-22.23 27.813-6.561 34.109 19.008 54.253 32.491 25.596 84.395 46.491 96.385 48.285 13.16 1.969 12.985-5.815 13.009-17.403 0.066-30.823-3.791-61.637-11.22-91.544-3.912-15.755-11.138-63.548-28.592-65.539z"/> <path d="m1166.5 785.71c-33.999 14.871-29.684 37.645-42.067 56.304-16.539 24.921-75.594-27.122 6.865-72.599 21.582-11.903 35.962-34.673 72.665-21.82 51.524 18.043 50.424 51.761 27.029 56.366-30.105 5.925-31.815-32.543-64.492-18.251z"/> <path d="m633.28 970.61c-2.789 4.104-3.766 9.821-7.137 13.623-3.642 4.108-13.067 7.727-18.335 5.324-14.615-6.668-18.012-16.788-10.953-30.893 28.664-57.276 61.815-66.413 124.58-52.86 11.553 2.495 22.771 8.339 27.733 21.337 4.857 12.725-12.617 19.396-22.681 18.288-15.94-1.756-52.004-35.434-93.206 25.181z"/> <path d="m637.91 1188.6c-5.595 8.292-19.762 13.507-21.387 13.638-9.983 0.808-18.272-13.722-16.661-22.27 5.828-30.925 63.093-51.854 83.183-34.161 14.926 13.144 14.964 35.14-16.662 34.828-12.395-0.122-20.509-3.84-28.473 7.965z"/> <path d="m717.36 1240.4c-0.134 10.242-9.212 14.252-17.947 15.986-10.358 2.056-18.298 2.074-24.009 12.648-4.116 7.621-13.043 13.583-21.119 16.241-19.047 6.269-33.744-8.64-25.868-23.381 2.274-4.255 5.724-7.743 9.124-11.165 10.586-10.651 25.384-34.309 42.111-31.688 10.141 1.589 20.158 2.509 29.361 7.443 7.688 4.12 8.458 5.321 8.347 13.916z"/> <path d="m1275.1 912.52c-10.904 4.013-21.432 14.606-33.884 12.73-9.084-1.369-16.852-14.026-15.304-22.983 1.555-8.994 17.964-13.307 25.038-16.213 10.747-4.414 53.436-19.693 67.508-18.453 12.137 1.07 10.386 14.942 7.799 27.098-0.27 1.269-1.226 2.85-2.317 3.415-7.241 3.752-12.936 8.02-21.154 9.666-9.195 1.843-18.782 1.463-27.686 4.74z"/> <path d="m668.03 1056.7c10.209 1.148 12.126 14.675 10.294 22.768-2.564 11.323-13.866 13.272-23.274 17.568-7.218 3.296-47.912 21.818-56.838 22.634-21.661 1.98-11-16.295-2.671-24.855 19.584-20.128 63.661-39.108 72.489-38.115z"/> <path d="m1296.8 1072.5c-11.681 2.792-18.075-1.341-22.346-12.816-2.113-5.675 1.276-12.251 6.259-15.122 14.762-8.504 109.85 1.37 86.914 25.851-31.474 33.587-30.611-7.523-70.827 2.087z"/> <path d="m1322.3 970.24c-12.939-2.531-26.178 5.846-40.296 10.184-6.817 2.094-12.979 0.065-18.47-2.172-5.583-2.276-2.596-11.062-0.187-14.872 3.723-5.888 10.783-8.09 17.196-9.706 62.161-15.659 62.235-19.071 71.428-14.475 7.399 6.185 9.197 14.436 6.721 23.097-0.961 3.362-5.687 4.732-9.737 5.523-7.9 1.543-15.893 1.635-26.655 2.421z"/> </svg>