html - 用图案图像填充旋转的圆形 SVG
问题描述
所以我得到了这个使用 SVG 围绕这个圆圈旋转的文本。我想用图像填充它以使其不那么乏味。这是我的 HTML 中的代码。
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait'>
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>
这是定义速度和浏览器支持的 CSS。
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
我尝试了几种不同的方法来尝试填充内圈,但似乎没有任何作用。任何帮助将不胜感激!
解决方案
添加patternUnits="userSpaceOnUse" height="380" width="267"
in my_portrait
并fill="url(#my_portrait)"
添加circlePath
#circle svg {
width: 100%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
-ms-animation-duration: 20s;
-o-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
}
}
@-ms-keyframes rotate {
from {
-ms-transform: rotate(360deg);
}
to {
-ms-transform: rotate(0);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(360deg);
}
to {
-o-transform: rotate(0);
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<pattern id='my_portrait' patternUnits="userSpaceOnUse" height="380" width="267">
<image xlink:href="http://gastv.mx/wp-content/uploads/2014/05/jumex.jpg" x="-30" y="-30"
width="380" height="267" />
</pattern>
<path id="circlePath" d=" M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 " fill="url(#my_portrait)" />
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g id="rotating_text">
<use xlink:href="#circlePath" fill="rgb(81,84,77)" stroke="black" stroke-width="2px"/>
<text fill="#000">
<textPath xlink:href="#circlePath" fill="white">Curse this circular mass of misery!!!</textPath>
</text>
</g>
</svg>
</div>
</div>
推荐阅读
- python - 如何加速/替换 python for 循环
- azure - Azure SQL 数据库中的数据传输
- r - 在滚动窗口中对数据框的列应用求和积
- office365 - mscoree.dll 未加载。在 Outlook 2016 上加载 com 加载项期间发生运行时错误
- karate - 场景示例中的 jsonPath
- email - 为什么 SMTP-Server 在响应 DATA 中给出“500 5.5.2 Error: bad syntax”?
- python - 查找矩阵大对角线以下的所有元素
- ios - 当用户单击 ios 13.0 中的登录按钮时,Facebook 登录总是被取消,但它在 ios 12.0 中完全可以正常工作,或者在 swift 中更小
- javascript - 如何在列表中的按钮上使用间隔进行触发单击
- javascript - 同步执行 NodeJS CLI 命令 - 无法在 child_process exec 的关闭事件上放置/创建新文件(嵌套执行命令)