| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/> |
| </svg> |
控制大小、颜色
| <style type="text/css"> |
| .svg-style-1 svg { |
| display: inline-block; |
| vertical-align: -.125em; |
| width: 4rem; |
| height: 4rem; |
| color: #B75555; |
| } |
| </style> |
| |
| <span class="svg-style-1"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/> |
| </svg> |
| </span> |
与文字混排
| <style type="text/css"> |
| .svg-style-2 { |
| font-size: 1.5rem; |
| color:#c69; |
| } |
| .svg-style-2 svg { |
| display: inline-block; |
| vertical-align: -.125em; |
| width: 1.5rem; |
| height: 1.5rem; |
| } |
| </style> |
| |
| <span class="svg-style-2"> |
| 图标 |
| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/> |
| </svg> |
| 与文字混排 |
| </span> |
SVG 需增加专门的样式进行控制
用于链接
| <style type="text/css"> |
| .svg-style-3 svg { |
| display: inline-block; |
| vertical-align: -.125em; |
| width: 1rem; |
| height: 1rem; |
| } |
| </style> |
| |
| <a href="#" class="svg-style-3"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/> |
| </svg> |
| 链接 |
| </a> |
用于按钮
| <style type="text/css"> |
| .svg-style-4 svg { |
| display: inline-block; |
| vertical-align: -.125em; |
| width: 1rem; |
| height: 1rem; |
| } |
| </style> |
| |
| <button class="be-btn be-btn-major svg-style-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> |
| <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z"/> |
| </svg> |
| 按钮 |
| </button> |
SVG用于CSS背景中
| <style type="text/css"> |
| .svg-style-5 { |
| display: inline-block; |
| width: 6rem; |
| height: 6rem; |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z'/%3e%3c/svg%3e"); |
| background-size: 6rem 6rem; |
| background-repeat: no-repeat; |
| } |
| </style> |
| |
| <span class="svg-style-5"></span> |
SVG用于CSS背景中,指定颜色
| <style type="text/css"> |
| .svg-style-6 { |
| display: inline-block; |
| width: 6rem; |
| height: 6rem; |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%237952b3' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.006 4.158c1.74 0 2.924-1.119 2.924-2.806 0-1.641-1.178-2.584-2.56-2.584-.897 0-1.442.421-1.612.68h-.064l.193-2.344h3.621V4.002H5.791L5.445 8.63h1.149c.193-.358.668-.809 1.435-.809.85 0 1.582.604 1.582 1.57 0 1.085-.779 1.682-1.57 1.682-.697 0-1.389-.31-1.53-1.031H5.276c.065 1.213 1.149 2.115 2.72 2.115Z'/%3e%3c/svg%3e"); |
| background-size: 6rem 6rem; |
| background-repeat: no-repeat; |
| } |
| </style> |
| |
| <span class="svg-style-6"></span> |