问题描述
预期：
在 React 应用程序中，我试图在 h1::before 中使用 background-image 或 content:url() 显示一个 svg 图标（来自 svg 精灵表）。
它最终什么也没显示。
// in App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandBox</h1>
</div>
);
}
// in styles.css
h1::before {
content: "...";
border: 1px solid grey;
background-image: url(icons.svg#working-at-home);
width: 15px;
height: 15px;
}
// in icons.svg
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="working-at-home" viewBox="0 0 512.006 512.006"><title>working-at-home</title><g><path d="m360.801 213.483 12.911-77.461h20.004l23.994 120h30.591l-27.589-137.944c-1.406-7.002-7.559-12.056-14.707-12.056h-27.295l12.09-72.539c1.362-8.174-4.16-15.894-12.334-17.256-8.145-1.509-15.894 4.146-17.256 12.334l-30 180c-1.621 9.727 4.953 15.926 12.344 17.209 7.392 1.283 15.6-2.35 17.247-12.287z"/><path d="m256.006 496.022h30c8.284 0 15-6.716 15-15v-135c0-33.138-26.863-60-60-60h-121c-10.977 0-21.14-3.177-30-8.344v38.344c0 16.567 13.431 30 30 30h121v135c0 8.284 6.716 15 15 15z"/><path d="m120.006 436.022v30h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h60c8.291 0 15-6.709 15-15s-6.709-15-15-15h-15v-30h31c16.569 0 30-13.433 30-30 0-16.569-13.431-30-30-30h-121v-45c0-151.802-30.293-214.131-31.582-216.709-3.721-7.397-12.7-10.371-20.127-6.709-7.412 3.706-10.415 12.715-6.709 20.127.292.571 28.418 58.506 28.418 203.291 0 5.235 0 63.704 0 60 0 24.853 20.147 45 45 45z"/><path d="m497.006 286.022c-6.442 0-196.41 0-189.408 0 7.817 8.668 13.885 18.792 17.88 30h95.528v165c0 8.291 6.709 15 15 15s15-6.709 15-15v-165h46c8.291 0 15-6.709 15-15s-6.709-15-15-15z"/></g><circle cx="121.006" cy="76.022" r="45"/><path d="m91.006 151.022v75c0 16.567 13.431 30 30 30h105c8.284 0 15-6.716 15-15 0-24.853-20.147-45-45-45h-45v-45c0-16.569-13.431-30-30-30s-30 13.431-30 30z"/></symbol><symbol id="github" viewBox="0 0 24 24"><title>github</title><path d="m12 .5c-6.63 0-12 5.28-12 11.792 0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56 4.801-1.548 8.236-5.97 8.236-11.173 0-6.512-5.373-11.792-12-11.792z"/></symbol><symbol id="phone-call" viewBox="0 0 473.806 473.806"><title>phone-call</title><path d="M374.456,293.506c-9.7-10.1-21.4-15.5-33.8-15.5c-12.3,0-24.1,5.3-34.2,15.4l-31.6,31.5c-2.6-1.4-5.2-2.7-7.7-4 c-3.6-1.8-7-3.5-9.9-5.3c-29.6-18.8-56.5-43.3-82.3-75c-12.5-15.8-20.9-29.1-27-42.6c8.2-7.5,15.8-15.3,23.2-22.8 c2.8-2.8,5.6-5.7,8.4-8.5c21-21,21-48.2,0-69.2l-27.3-27.3c-3.1-3.1-6.3-6.3-9.3-9.5c-6-6.2-12.3-12.6-18.8-18.6 c-9.7-9.6-21.3-14.7-33.5-14.7s-24,5.1-34,14.7c-0.1,0.1-0.1,0.1-0.2,0.2l-34,34.3c-12.8,12.8-20.1,28.4-21.7,46.5 c-2.4,29.2,6.2,56.4,12.8,74.2c16.2,43.7,40.4,84.2,76.5,127.6c43.8,52.3,96.5,93.6,156.7,122.7c23,10.9,53.7,23.8,88,26 c2.1,0.1,4.3,0.2,6.3,0.2c23.1,42.5-8.3,57.7-24.8c0.1-0.2,0.3-0.3,0.4-0.5c5.2-6.3,11.2-12,17.5-18.1c4.3-4.1,8.7-8.4,13-12.9 c9.9-10.3,15.1-22.3,15.1-34.6c0-12.4-5.3-24.3-15.4-34.3L374.456,293.506z M410.256,398.806 C410.156,398.806,410.156,398.906,410.256,398.806c-3.9,4.2-7.9,8-12.2,12.2c-6.5,6.2-13.1,12.7-19.3,20 c-10.1,10.8-22,15.9-37.6,15.9c-1.5,0-3.1,0-4.6-0.1c-29.7-1.9-57.3-13.5-78-23.4c-56.6-27.4-106.3-66.3-147.6-115.6 c-34.1-41.1-56.9-79.1-72-119.9c-9.3-24.9-12.7-44.3-11.2-62.6c1-11.7,5.5-21.4,13.8-29.7l34.1-34.1c4.9-4.6,10.1-7.1,15.2-7.1 c6.3,11.4,3.8,14.6,7c0.1,0.3,0.3c6.1,5.7,11.9,11.6,18,17.9c3.1,3.2,6.4,9.5,9.7l27.3,27.3 c10.6,10.6,20.4,31c-2.9,2.9-5.7,5.8-8.6,8.6c-8.4,8.6-16.4,16.6-25.1,24.4c-0.2,0.2-0.4,0.3-0.5,0.5 c-8.6,8.6-7,17-5.2,22.7c0.1,0.6,0.9c7.1,17.2,17.1,33.4,32.3,52.7l0.1,0.1c27.6,34,56.7,60.5,88.8,80.8 c4.1,2.6,8.3,4.7,12.3,6.7c3.6,1.8,7,3.5,9.9,5.3c0.4,0.8,0.5,1.2,0.7c3.4,1.7,6.6,2.5,2.5c8.3,13.5-5.2,15.2-6.9 l34.2-34.2c3.4-3.4,8.8-7.5,15.1-7.5c6.2,11.3,3.9,14.4,7.3c0.1,0.2l55.1,55.1 C420.456,377.706,420.456,388.206,398.806z"/><path d="M256.056,112.706c26.2,4.4,50,16.8,69,35.8s31.3,42.8,35.8,69c1.1,6.8,11.2,13.3,11.2c0.8,1.5-0.1,2.3-0.2 c7.4-1.2,12.3-8.2,11.1-15.6c-5.4-31.7-20.4-60.6-43.3-83.5s-51.8-37.9-83.5-43.3c-7.4-1.2-14.3,3.7-15.6,11 S248.656,111.506,256.056,112.706z"/><path d="M473.256,209.006c-8.9-52.2-33.5-99.7-71.3-137.5s-85.3-62.4-137.5-71.3c-7.3-1.3-14.2,3.7-15.5,11 c-1.2,7.4,3.7,14.3,11.1,15.6c46.6,7.9,89.1,30,122.9,63.7c33.8,33.8,55.8,76.3,63.7,122.9c1.1,11.2 c0.8,2.3-0.2C469.556,223.306,474.556,216.306,473.256,209.006z"/></symbol><symbol id="message" viewBox="0 0 512 512"><title>message</title><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45h422c24.813,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"/></symbol><symbol id="graduation-hat" viewBox="0 0 511.962 511.962"><title>graduation-hat</title><path d="m502.343 177.3-240-104c-4.059-1.759-8.665-1.759-12.724 0l-240 104c-12.824 5.557-12.827 23.804 0 29.361l86.362 37.423v99.896c0 53.832 70.28 96 160 96s160-42.168 160-96v-99.896l16-6.933v170.829c0 8.836 7.164 16 16 16s16-7.164 16-16v-184.695l38.362-16.623c12.824-5.557 12.826-23.804 0-29.362zm-246.362-71.882 199.759 86.563-15.843 6.865-181.932-22.742c-8.769-1.089-16.765 5.124-17.861 13.892s5.124 16.765 13.892 17.861l128.142 16.018-126.157 54.668c-112.857-48.905-88.82-38.489-199.759-86.563zm128 238.563c0 15.075-12.373 30.596-33.947 42.581-51.381 28.545-136.575 28.629-188.106 0-21.574-11.985-33.947-27.506-33.947-42.581v-86.029l121.638 52.71c4.052 1.756 8.657 1.762 12.724 0l121.638-52.71z"/></symbol><symbol id="skill" viewBox="0 0 512 512"><title>skill</title><path d="m386.372 165.925c0-10.2-8.299-18.499-18.499-18.499h-1.242c-1.589 0-2.96-1.085-3.41-2.701-2.133-7.646-5.101-15.084-8.824-22.107-.765-1.442-.544-3.146.551-4.239l.633-.633c7.212-7.213 7.212-18.95 0-26.162l-14.785-14.784c-7.229-7.229-18.932-7.231-26.162 0l-.138.138c-1.12 1.119-2.85 1.325-4.311.509-7.212-4.026-14.878-7.244-22.785-9.564-1.44-.423-2.446-1.793-2.446-3.377 0-10.201-8.298-18.499-18.498-18.499h-20.908c-10.201 0-18.499 8.299-18.499 18.543 0 1.54-1.006 2.91-2.445 3.333-7.908 2.321-15.574 5.539-22.785 9.564-1.46.814-3.192.611-4.32-.518l-.13-.129c-7.223-7.223-18.932-7.231-26.161 0l-14.784 14.783c-7.229 7.229-7.231 18.931 0 26.162l.633.633c1.093 1.094 1.314 2.798.55 4.239-3.723 7.021-6.692 14.459-8.824 22.106-.451 1.616-1.821 2.702-3.41 2.702h-1.243c-10.201 0-18.499 8.299-18.499 18.499v20.907c0 10.201 8.299 18.499 18.499 18.499h2.228c1.538 0 2.897 1.04 3.381 2.589 2.293 7.342 5.37 14.474 9.145 21.197.727 1.295.464 2.97-.639 4.073l-1.821 1.82c-7.229 7.229-7.231 18.931 0 26.162l14.783 14.783c7.228 7.228 18.931 7.232 26.161 0l2.315-2.314c1.078-1.079 2.725-1.357 4.005-.674 6.659 3.551 13.701 6.428 20.93 8.548 1.432.42 2.431 1.813 2.431 3.389v3.346c0 10.2 8.299 18.499 18.499 18.499h20.908c10.2 0 18.498-8.299 18.498-18.499v-3.346c0-1.576 1-2.969 2.431-3.389 7.23-2.121 14.272-4.997 20.93-8.548 1.279-.682 2.927-.405 4.006.675l2.313 2.313c7.228 7.229 18.931 7.231 26.163 0l14.784-14.784c7.212-7.213 7.212-18.949-.001-26.162l-1.82-1.819c-1.103-1.104-1.367-2.78-.641-4.073 3.775-6.721 6.852-13.853 9.147-21.199.483-1.548 1.842-2.588 3.38-2.588h2.228c10.2 0 18.499-8.299 18.499-18.499v-20.905zm-14.999 20.907c0 1.931-1.57 3.501-3.501 3.501h-2.228c-8.135 0-15.248 5.271-17.697 13.115-1.983 6.349-4.643 12.515-7.908 18.326-4.003 7.13-2.723 16.186 3.113 22.024l1.82 1.82c1.365 1.365 1.365 3.586 0 4.951l-14.783 14.783c-1.367 1.367-3.583 1.369-4.952 0l-2.313-2.313c-5.705-5.706-14.617-7.066-21.669-3.303-5.756 3.07-11.844 5.556-18.094 7.39-7.777 2.281-13.208 9.593-13.208 17.781v3.346c0 1.93-1.57 3.5-3.5 3.5h-20.908c-1.931 0-3.501-1.57-3.501-3.5v-3.346c0-8.188-5.432-15.5-13.208-17.781-6.248-1.833-12.335-4.319-18.093-7.39-2.667-1.422-5.599-2.113-8.523-2.113-4.809 0-9.597 1.867-13.145 5.415l-2.315 2.314c-1.366 1.366-3.581 1.368-4.95 0l-14.784-14.783c-1.366-1.367-1.368-3.582 0-4.951l1.821-1.821c5.836-5.836 7.116-14.892 3.112-22.023-3.264-5.813-5.924-11.979-7.907-18.326-2.45-7.845-9.562-13.116-17.697-13.116h-2.228c-1.93 0-3.501-1.57-3.501-3.501v-20.907c0-1.93 1.57-3.5 3.501-3.5h1.243c8.269 0 15.612-5.622 17.857-13.671 1.844-6.61 4.41-13.039 7.629-19.11 3.87-7.3 2.585-16.089-3.196-21.87l-.633-.633c-1.366-1.367-1.368-3.582 0-4.951l14.784-14.784c.892-.892 1.933-1.025 2.474-1.025s1.583.133 2.485 1.035l.129.129c5.821 5.822 14.962 7.056 22.228 3 6.235-3.481 12.863-6.263 19.698-8.269 7.784-2.284 13.22-9.573 13.22-17.769 0-1.931 1.57-3.501 3.501-3.501h20.908c1.93 0 3.5 1.57 3.5 3.545 0 8.151 5.437 15.44 13.222 17.725 6.834 2.005 13.462 4.787 19.698 8.268 7.265 4.055 16.406 2.822 22.228-2.999l.139-.139c1.365-1.366 3.583-1.368 4.95 0l14.784 14.784c1.365 1.365 1.365 3.586 0 4.951l-.632.632c-5.783 5.782-7.067 14.571-3.197 21.871 3.218 6.071 5.786 12.501 7.628 19.11 2.245 8.049 9.588 13.671 17.858 13.671h1.242c1.931 0 3.501 1.57 3.501 3.5v20.908z"/><path d="m256 96.26c-43.25 0-78.437 35.187-78.437 78.437 0 43.311 35.298 78.437 78.437 78.437 43.144 0 78.437-35.132 78.437-78.437 0-43.25-35.187-78.437-78.437-78.437zm0 141.876c-17.739 0-33.792-7.328-45.316-19.104 6.929-10.753 17.429-18.719 29.671-22.424 4.679 2.462 10 3.864 15.645 3.864s10.965-1.401 15.645-3.864c12.243 3.705 22.743 11.671 29.672 22.424-11.525 11.776-27.578 19.104-45.317 19.104zm-18.715-71.379c0-10.319 8.395-18.715 18.715-18.715s18.715 8.395 18.715 18.715c0 10.319-8.396 18.715-18.715 18.715s-18.715-8.395-18.715-18.715zm73.561 39.76c-6.999-9.208-16.188-16.494-26.717-21.204 3.526-5.327 5.586-11.704 5.586-18.556 0-18.59-15.124-33.714-33.714-33.714s-33.714 15.124-33.714 33.714c0 6.852 2.06 13.229 5.585 18.556-10.529 4.71-19.719 11.996-26.718 21.205-5.453-9.362-8.593-20.228-8.593-31.82 0-34.98 28.459-63.439 63.439-63.439s63.438 28.459 63.438 63.439c0 11.592-3.14 22.458-8.592 31.819z"/><path d="m381.263 51.619c-33.873-33.629-78.869-51.966-126.577-51.614-40.215.291-78.124 13.808-109.628 39.09-3.231 2.593-3.748 7.312-1.156 10.543 2.593 3.229 7.312 3.748 10.543 1.155 28.845-23.148 63.545-35.523 100.35-35.789 43.742-.321 84.886 16.467 115.901 47.259 31.02 30.796 48.102 71.827 48.102 115.534 0 37.393-12.329 72.551-35.653 101.675-2.59 3.233-2.068 7.952 1.165 10.542 1.384 1.108 3.039 1.646 4.683 1.646 2.199 0 4.378-.962 5.858-2.812 25.115-31.358 38.946-70.796 38.946-111.051 0-47.734-18.657-92.545-52.534-126.178z"/><path d="m370.942 305.203c-3.34-2.448-8.034-1.728-10.483 1.613-10.254 13.982-18.897 29.084-25.775 44.942h-157.261c-10.179-23.552-24.116-45.067-41.482-64.018-27.38-29.877-42.557-68.659-42.737-109.203-.168-37.868 13.102-74.882 37.368-104.22 2.64-3.192 2.192-7.919-.999-10.558-3.192-2.641-7.919-2.192-10.558.999-26.5 32.041-40.993 72.472-40.809 113.846.196 44.281 16.774 86.638 46.678 119.27 15.624 17.05 28.269 36.327 37.681 57.379-7.727 4.488-12.939 12.851-12.939 22.412 0 7.193 2.949 13.709 7.698 18.407-4.749 4.699-7.698 11.214-7.698 18.407s2.949 13.708 7.698 18.407c-4.749 4.699-7.698 11.214-7.698 18.407 0 14.284 11.622 25.906 25.906 25.906h.477v2.098c0 18.033 14.671 32.704 32.704 32.704h94.576c18.034 0 32.704-14.671 32.704-32.704v-2.098h.477c14.285 0 25.906-11.622 25.906-25.906 0-7.193-2.948-13.708-7.698-18.407 4.749-4.699 7.698-11.214 7.698-18.407s-2.948-13.708-7.698-18.407c4.749-4.699 7.698-11.214 7.698-18.407 0-9.532-5.178-17.872-12.866-22.371 6.253-13.946 13.978-27.243 23.045-39.608 2.449-3.341 1.726-8.034-1.613-10.483zm-49.948 174.093c0 9.763-7.943 17.706-17.706 17.706h-94.576c-9.763 0-17.706-7.943-17.706-17.706v-2.098h129.987v2.098zm-97.818-38.912h113.293c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-160.938c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h12.585c4.142 0 7.499-3.358 7.499-7.499s-3.358-7.499-7.499-7.499h-12.585c-6.014 0-10.907-4.893-10.907-10.907s4.893-10.907 10.907-10.907h160.938c6.014 0 10.907 4.893 10.907 10.907s-4.893 10.907-10.907 10.907h-113.293c-4.142 0-7.499 3.358-7.499 7.499s3.357 7.499 7.499 7.499zm113.293-51.812h-160.938c-6.014 0-10.907-4.893-10.907-10.908 0-5.327 3.841-9.767 8.898-10.714.161-.021.323-.042.484-.074.5-.07 1.007-.12 1.526-.12h160.938c.544 0 1.075.053 1.599.131.167.033.334.055.501.077 5.012.982 8.807 5.404 8.807 10.7-.001 6.015-4.894 10.908-10.908 10.908z"/></symbol></svg>
这是CodeSandbox。您可以看到一个带有三个点的框，您可以在其中用 svg 图标替换三个点。
那么我该如何解决这个问题？
下一主题
我对此进行了一些研究，结果表明符号标签不适用于背景图像或内容：url。因此，将 svg 的符号标签更改为 g 标签，除了最外面的一个。
然后结果是下一个问题，即所有精灵表的svgs图像在屏幕上折叠成一个正方形（它们相互重叠）。因此，我放弃了使用 background-image 或 content:url 渲染 svg 精灵表。
我想有办法解决这个问题。现在，我将坚持使用传统方式在 html 中显示 svg。 （在 html 中使用 '
如果您知道如何解决此问题。请告诉我。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）