代码之家 › 专栏 › 技术社区 › dagda1

将svg元素包装成圆形,而不必使用javascript

svg css html

dagda1 · 技术社区 · 5 年前

我有这种安排。

我有许多类似的图像,我希望svg的地球被圆圈包围。

button {
  background: transparent;
  border: none;
}

<html>

  <body>
    <button type="button">
    <svg class="icon icon-geo-view"><circle r="100 " cx="50% " cy="50% " style=" stroke: black; fill: transparent; stroke-width: 4px; "></circle><svg id="icon-geo-view " viewBox="0 0 26 32 " width="100% " height="100%
      "><title>geo-view</title><path d="M32 15.406h-7.12c-0.065-2.63-0.533-5.143-1.363-7.443 1.603-0.668 3.085-1.558 4.436-2.609 2.402 2.697 3.904 6.198 4.047 10.051zM15.343 31.996c-1.973-1.643-3.629-3.777-4.84-6.255 1.554-0.486 3.201-0.752 4.903-0.806v7.064c-0.021 0-0.042-0.001-0.063-0.002zM16.654
      0.004c2.239 1.864 4.067 4.361 5.303 7.274-1.693 0.578-3.492 0.914-5.365 0.974v-8.251c0.023 0.001 0.042 0.002 0.062 0.004zM18.632 0.205c3.277 0.545 6.217 2.076 8.506 4.291-1.243 0.953-2.602 1.761-4.070 2.372-1.081-2.561-2.597-4.826-4.436-6.664zM15.406
      0v8.251c-1.873-0.061-3.673-0.395-5.365-0.974 1.236-2.913 3.063-5.41 5.303-7.274 0.021-0.001 0.040-0.002 0.062-0.004zM8.93 6.87c-1.466-0.612-2.826-1.419-4.069-2.372 2.288-2.216 5.229-3.746 8.506-4.291-1.84 1.837-3.356 4.101-4.437 6.664zM9.594 8.372c1.831
      0.635 3.782 1.006 5.812 1.067v5.967h-7.099c0.064-2.486 0.505-4.862 1.287-7.034zM15.406 16.594v7.154c-1.873 0.057-3.683 0.363-5.39 0.913-1.028-2.448-1.635-5.176-1.71-8.067h7.099zM13.368 31.795c-2.936-0.488-5.603-1.767-7.771-3.624 1.17-0.811 2.434-1.497
      3.785-2.019 1.035 2.147 2.39 4.053 3.986 5.642zM16.594 32v-7.064c1.7 0.055 3.348 0.321 4.903 0.806-1.212 2.478-2.866 4.612-4.84 6.255-0.020 0-0.042 0.001-0.063 0.002zM22.618 26.152c1.35 0.521 2.613 1.209 3.785 2.019-2.168 1.856-4.835 3.136-7.771 3.624
      1.596-1.59 2.949-3.496 3.986-5.642zM21.983 24.661c-1.707-0.55-3.518-0.856-5.39-0.913v-7.154h7.099c-0.075 2.891-0.683 5.619-1.71 8.067zM16.594 15.406v-5.967c2.029-0.062 3.98-0.431 5.812-1.066 0.781 2.172 1.222 4.548 1.287 7.034l-7.099-0.001zM4.048
      5.355c1.351 1.051 2.833 1.94 4.435 2.609-0.83 2.3-1.298 4.812-1.363 7.443h-7.12c0.142-3.853 1.645-7.355 4.048-10.051zM0 16.594h7.12c0.074 3.034 0.708 5.899 1.785 8.474-1.504 0.587-2.907 1.368-4.201 2.293-2.788-2.775-4.548-6.569-4.703-10.767zM27.297
      27.36c-1.294-0.924-2.697-1.706-4.202-2.293 1.078-2.575 1.711-5.441 1.786-8.474h7.12c-0.156 4.2-1.916 7.993-4.703 10.767z "></path></svg></svg></button>
  </body>

</html>

0 回复 | 直到 5 年前

enxaneta 5 年前

viewBox border-radius: 50%

在你的代码里 viewBox="0 0 26 32" icon-geo-view viewBox="0 0 32 32" . 如果要使viewBox变大并将球体保持在中间,请执行以下操作: -(8/2) -(8/2) (32 + 8) (32 + 8)

希望对你有帮助。

svg{border:1px solid;border-radius:50% }
button{padding:10px}

 <button type="button">
    <svg id="icon-geo-view" viewBox="-4 -4 40 40 " width="100" ><title>geo-view</title><path d="M32 15.406h-7.12c-0.065-2.63-0.533-5.143-1.363-7.443 1.603-0.668 3.085-1.558 4.436-2.609 2.402 2.697 3.904 6.198 4.047 10.051zM15.343 31.996c-1.973-1.643-3.629-3.777-4.84-6.255 1.554-0.486 3.201-0.752 4.903-0.806v7.064c-0.021 0-0.042-0.001-0.063-0.002zM16.654
      0.004c2.239 1.864 4.067 4.361 5.303 7.274-1.693 0.578-3.492 0.914-5.365 0.974v-8.251c0.023 0.001 0.042 0.002 0.062 0.004zM18.632 0.205c3.277 0.545 6.217 2.076 8.506 4.291-1.243 0.953-2.602 1.761-4.070 2.372-1.081-2.561-2.597-4.826-4.436-6.664zM15.406
      0v8.251c-1.873-0.061-3.673-0.395-5.365-0.974 1.236-2.913 3.063-5.41 5.303-7.274 0.021-0.001 0.040-0.002 0.062-0.004zM8.93 6.87c-1.466-0.612-2.826-1.419-4.069-2.372 2.288-2.216 5.229-3.746 8.506-4.291-1.84 1.837-3.356 4.101-4.437 6.664zM9.594 8.372c1.831
      0.635 3.782 1.006 5.812 1.067v5.967h-7.099c0.064-2.486 0.505-4.862 1.287-7.034zM15.406 16.594v7.154c-1.873 0.057-3.683 0.363-5.39 0.913-1.028-2.448-1.635-5.176-1.71-8.067h7.099zM13.368 31.795c-2.936-0.488-5.603-1.767-7.771-3.624 1.17-0.811 2.434-1.497
      3.785-2.019 1.035 2.147 2.39 4.053 3.986 5.642zM16.594 32v-7.064c1.7 0.055 3.348 0.321 4.903 0.806-1.212 2.478-2.866 4.612-4.84 6.255-0.020 0-0.042 0.001-0.063 0.002zM22.618 26.152c1.35 0.521 2.613 1.209 3.785 2.019-2.168 1.856-4.835 3.136-7.771 3.624
      1.596-1.59 2.949-3.496 3.986-5.642zM21.983 24.661c-1.707-0.55-3.518-0.856-5.39-0.913v-7.154h7.099c-0.075 2.891-0.683 5.619-1.71 8.067zM16.594 15.406v-5.967c2.029-0.062 3.98-0.431 5.812-1.066 0.781 2.172 1.222 4.548 1.287 7.034l-7.099-0.001zM4.048
      5.355c1.351 1.051 2.833 1.94 4.435 2.609-0.83 2.3-1.298 4.812-1.363 7.443h-7.12c0.142-3.853 1.645-7.355 4.048-10.051zM0 16.594h7.12c0.074 3.034 0.708 5.899 1.785 8.474-1.504 0.587-2.907 1.368-4.201 2.293-2.788-2.775-4.548-6.569-4.703-10.767zM27.297
      27.36c-1.294-0.924-2.697-1.706-4.202-2.293 1.078-2.575 1.711-5.441 1.786-8.474h7.12c-0.156 4.2-1.916 7.993-4.703 10.767z "></path></svg></button>