Question

在Default background color of SVG root element之后，效果很好：

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
<rect width="100%" height="100%" fill="#00f"/>
<g transform="matrix(.209 0 0 .209 10 10)" fill="#fff">
<path d="M153.438 214.998h38.635a7.728 7.728 0 0 0 7.729-7.729V149.29c11.293 3.33 32.566 10.726 56.601 24.7a7.954 7.954 0 0 0 4.01 1.083 8.004 8.004 0 0 0 6.927-3.982c2.218-3.819.922-8.717-2.897-10.934-38.067-22.107-69.365-28.665-69.927-28.792a8.086 8.086 0 0 0-1.611-.17 7.84 7.84 0 0 0-.83-.046H153.44c-.089 0-.175.011-.263.014-4.158-.182-13.592-1.108-23.015-5.193-5.649-2.433-11.267-5.932-16.021-10.952-3.619-3.839-6.79-8.56-9.144-14.62l90.698-49.689c2.32 1.6 6.411 1.43 13.793-2.433 5.441 6.621 11.063 12.573 15.952 16.842l4.215 25.197s3.901-13.677 8.358-16.17c4.46-2.493 16.107-2.07 16.107-2.07l-16.145-11.402c-2.209-6.94-6.71-16.284-12.248-25.609 3.609-3.844 5.995-6.912 5.995-6.912s-4.047.371-9.403 1.387a186.802 186.802 0 0 0-3.978-5.968C204.671 3.924 191.212-1.413 188.748.301c-2.463 1.713-2.137 16.187 11.531 35.832.225.323.455.645.683.968-5.817 3.643-7.754 6.656-7.669 9.222L103.386 95.58c-.12-.422-.24-.844-.353-1.277a7.997 7.997 0 0 0-9.748-5.743 7.997 7.997 0 0 0-5.743 9.746c.453 1.764.97 3.464 1.531 5.115L0 152.218l2.664 4.241 88.208-48.325c3.036 7.113 7.069 13.06 11.646 17.88 9.842 10.375 21.847 15.59 31.787 18.282a86.23 86.23 0 0 0 11.403 2.256v60.717a7.73 7.73 0 0 0 7.73 7.73zm44.068-202.11a2.665 2.665 0 0 1-3.711-.667 2.665 2.665 0 1 1 4.376-3.046 2.666 2.666 0 0 1-.665 3.712z"/>
<circle cx="172.755" cy="102.95" r="22.5"/>
<path d="M131.62 185.25a2.001 2.001 0 0 0-2.204-1.774c-15.38 1.662-29.272 4.263-40.939 7.588a2.001 2.001 0 1 0 1.098 3.849l-.003-.002c11.393-3.247 25.083-5.816 40.274-7.457a2.005 2.005 0 0 0 1.774-2.205zM226.632 246.152l-.002-.002c-16.906 2.916-36.568 4.59-57.541 4.59-31.868.002-60.722-3.872-81.452-10.07-10.362-3.093-18.689-6.78-24.279-10.736-5.632-3.98-8.297-8.056-8.269-11.86.002-2.267.885-4.54 2.794-6.91 1.901-2.36 4.83-4.745 8.669-7.008a2 2 0 0 0-2.031-3.445c-4.122 2.436-7.42 5.06-9.75 7.938-2.324 2.868-3.686 6.067-3.683 9.426.027 5.768 3.855 10.813 9.962 15.127 18.39 12.9 59.708 21.487 108.039 21.54 21.186 0 41.057-1.689 58.221-4.647a2.002 2.002 0 0 0 1.631-2.31 1.999 1.999 0 0 0-2.309-1.633zM276.294 202.372c-6.652-4.476-16.021-8.353-27.482-11.557a1.998 1.998 0 0 0-2.463 1.39 1.998 1.998 0 0 0 1.389 2.463c11.191 3.12 20.23 6.912 26.32 11.02 6.14 4.136 9.064 8.417 9.028 12.386.009 3.211-1.831 6.556-5.796 9.948-3.946 3.37-9.9 6.622-17.448 9.506a1.997 1.997 0 0 0-1.154 2.582 2.004 2.004 0 0 0 2.584 1.154c7.822-2.997 14.133-6.387 18.612-10.198 4.454-3.788 7.195-8.164 7.204-12.992-.033-6.032-4.19-11.253-10.794-15.702z"/>
<path d="M110.299 212.011c5.935-5.297 15.661-6.873 23.159-8.355 4.896-.968 3.347-6.37-1.453-5.422-9.84 1.945-22.479 4.526-29.337 12.613-7.59 8.95 5.778 15.986 12.602 18.633 3.357 1.302 9.04-3.514 4.438-5.299-4.131-1.6-15.757-6.504-9.409-12.17zM214.509 200.716c-1.792-.45-8.566 2.435-6.35 2.99 6.523 1.637 19.998 4.396 21.683 12.535 1.228 5.932-8.873 9.19-12.758 10.508-10.605 3.597-22.185 4.67-33.29 5.352a208.15 208.15 0 0 1-39.745-1.385c-1.822-.239-3.748.21-5.4.988-.493.232-2.768 1.764-.949 2.002 27.147 3.563 57.005 3.288 83.185-5.592 5.542-1.88 15.593-5.503 16.654-12.345 1.47-9.48-16.934-13.524-23.03-15.053z"/>
</g>
</svg>

也可以使用如下圆圈：

<circle cx="40" cy="40" r="40" fill="#00f"/>

现在想使用渐变添加重点。在HTML中，此CSS可以工作：

.icon-1 {
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(circle at bottom center, #1c79c0, #0389ff, #0dd3ff);
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

如何将CSS指令转换为嵌入式SVG样式，以便SVG独立版本与HTML + CSS中的SVG相同？

Answer 1

基于Robert Longson https://stackoverflow.com/users/1038015/robert-longson的建议

这是一个起点：

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>

<radialGradient spreadMethod="reflect"
    id="flameGradient"
    cx="50%"
    cy="50%"
    r="50%"
    fx="25%"
    fy="75%"
    fr="10%"
>
  <stop offset="0%" stop-color="white"/>
  <stop offset="10%" stop-color="yellow"/>
  <stop offset="95%" stop-color="red"/>
</radialGradient>

</defs>

<circle fill="url(#flameGradient)" cx="60" cy="60" r="50"/>

<g transform="matrix(.209 0 0 .209 25 25)" fill="#fff">
<path d="M153.438 214.998h38.635a7.728 7.728 0 0 0 7.729-7.729V149.29c11.293 3.33 32.566 10.726 56.601 24.7a7.954 7.954 0 0 0 4.01 1.083 8.004 8.004 0 0 0 6.927-3.982c2.218-3.819.922-8.717-2.897-10.934-38.067-22.107-69.365-28.665-69.927-28.792a8.086 8.086 0 0 0-1.611-.17 7.84 7.84 0 0 0-.83-.046H153.44c-.089 0-.175.011-.263.014-4.158-.182-13.592-1.108-23.015-5.193-5.649-2.433-11.267-5.932-16.021-10.952-3.619-3.839-6.79-8.56-9.144-14.62l90.698-49.689c2.32 1.6 6.411 1.43 13.793-2.433 5.441 6.621 11.063 12.573 15.952 16.842l4.215 25.197s3.901-13.677 8.358-16.17c4.46-2.493 16.107-2.07 16.107-2.07l-16.145-11.402c-2.209-6.94-6.71-16.284-12.248-25.609 3.609-3.844 5.995-6.912 5.995-6.912s-4.047.371-9.403 1.387a186.802 186.802 0 0 0-3.978-5.968C204.671 3.924 191.212-1.413 188.748.301c-2.463 1.713-2.137 16.187 11.531 35.832.225.323.455.645.683.968-5.817 3.643-7.754 6.656-7.669 9.222L103.386 95.58c-.12-.422-.24-.844-.353-1.277a7.997 7.997 0 0 0-9.748-5.743 7.997 7.997 0 0 0-5.743 9.746c.453 1.764.97 3.464 1.531 5.115L0 152.218l2.664 4.241 88.208-48.325c3.036 7.113 7.069 13.06 11.646 17.88 9.842 10.375 21.847 15.59 31.787 18.282a86.23 86.23 0 0 0 11.403 2.256v60.717a7.73 7.73 0 0 0 7.73 7.73zm44.068-202.11a2.665 2.665 0 0 1-3.711-.667 2.665 2.665 0 1 1 4.376-3.046 2.666 2.666 0 0 1-.665 3.712z"/>
<circle cx="172.755" cy="102.95" r="22.5"/>
<path d="M131.62 185.25a2.001 2.001 0 0 0-2.204-1.774c-15.38 1.662-29.272 4.263-40.939 7.588a2.001 2.001 0 1 0 1.098 3.849l-.003-.002c11.393-3.247 25.083-5.816 40.274-7.457a2.005 2.005 0 0 0 1.774-2.205zM226.632 246.152l-.002-.002c-16.906 2.916-36.568 4.59-57.541 4.59-31.868.002-60.722-3.872-81.452-10.07-10.362-3.093-18.689-6.78-24.279-10.736-5.632-3.98-8.297-8.056-8.269-11.86.002-2.267.885-4.54 2.794-6.91 1.901-2.36 4.83-4.745 8.669-7.008a2 2 0 0 0-2.031-3.445c-4.122 2.436-7.42 5.06-9.75 7.938-2.324 2.868-3.686 6.067-3.683 9.426.027 5.768 3.855 10.813 9.962 15.127 18.39 12.9 59.708 21.487 108.039 21.54 21.186 0 41.057-1.689 58.221-4.647a2.002 2.002 0 0 0 1.631-2.31 1.999 1.999 0 0 0-2.309-1.633zM276.294 202.372c-6.652-4.476-16.021-8.353-27.482-11.557a1.998 1.998 0 0 0-2.463 1.39 1.998 1.998 0 0 0 1.389 2.463c11.191 3.12 20.23 6.912 26.32 11.02 6.14 4.136 9.064 8.417 9.028 12.386.009 3.211-1.831 6.556-5.796 9.948-3.946 3.37-9.9 6.622-17.448 9.506a1.997 1.997 0 0 0-1.154 2.582 2.004 2.004 0 0 0 2.584 1.154c7.822-2.997 14.133-6.387 18.612-10.198 4.454-3.788 7.195-8.164 7.204-12.992-.033-6.032-4.19-11.253-10.794-15.702z"/>
<path d="M110.299 212.011c5.935-5.297 15.661-6.873 23.159-8.355 4.896-.968 3.347-6.37-1.453-5.422-9.84 1.945-22.479 4.526-29.337 12.613-7.59 8.95 5.778 15.986 12.602 18.633 3.357 1.302 9.04-3.514 4.438-5.299-4.131-1.6-15.757-6.504-9.409-12.17zM214.509 200.716c-1.792-.45-8.566 2.435-6.35 2.99 6.523 1.637 19.998 4.396 21.683 12.535 1.228 5.932-8.873 9.19-12.758 10.508-10.605 3.597-22.185 4.67-33.29 5.352a208.15 208.15 0 0 1-39.745-1.385c-1.822-.239-3.748.21-5.4.988-.493.232-2.768 1.764-.949 2.002 27.147 3.563 57.005 3.288 83.185-5.592 5.542-1.88 15.593-5.503 16.654-12.345 1.47-9.48-16.934-13.524-23.03-15.053z"/>
</g>

</svg>

如何设置SVG根元素的渐变背景颜色？

1 个答案: