第二个 Instagram 按钮的 CSS 属性

Question

Alexei

Asked:2022-03-24 19:02:08 +0000 UTC2022-03-24 19:02:08 +0000 UTC 2022-03-24 19:02:08 +0000 UTC

如何根据旋转时的位置使 SVG 图像的文本变为双色

772

我需要以这样一种方式布置这个 SVG 图像，即黑色背景上的部分是白色的，而白色背景上的部分是黑色的。图片会旋转，因此图像本身不是半黑半白的选项。

这是来自布局的图片：

4 个回答

Voted

Monkey Mutant · Answer 1 · 2022-03-24T22:11:52Z

我的 css + javascript 版本

let p = document.querySelectorAll(".circle");
p.forEach(function(el) {
  el.innerHTML = el.innerHTML.replace(/\S/g, '<span>$&</span>');
})

let span = document.querySelectorAll(".circle span");

for (let i = 0; i < span.length; i++) {
  span[i].style.transform = `rotate(${i*14}deg)`
}

.circle {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  animation: rotate 20s linear infinite;
}

.circle span {
  display: inline-block;
  position: absolute;
  top: 6%;
  left: 45%;
  transform-origin: 10px 100px;
  font-weight: 700;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg)
  }
}

.item1,
.item2 {
  width: 220px;
  height: 110px;
  position: relative;
  overflow: hidden;
}

.item1 {
  background: #fff;
}

.item2 {
  background: #000;
}

.item2 .circle {
  top: -110px;
  color: #fff;
}

.parent {
  width: 220px;
  height: 220px;
  overflow: hidden;
  margin: 30px auto;
}

<div class="parent">
  <div class="item1">
    <div class="circle">текст по кругу полность весь</div>
  </div>
  <div class="item2">
    <div class="circle">текст по кругу полность весь</div>
  </div>
</div>

De.Minov · Answer 2 · 2022-03-24T21:41:23Z

我们用<textPath>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
}

svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: linear-gradient(0deg, black, black) no-repeat 0 0 / 50% 50%;
}

#rotate {
  transform-origin: center center;
  animation: Rotate 10s linear infinite;
}

@keyframes Rotate {
  from {transform: rotate(-360deg);}
}

<svg viewbox="0 0 100 100" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink">
  <!-- invert -->
  <mask id="bg">
    <rect x="0" y="0" fill="black" width="100%" height="100%"/>
    <rect x="0" y="0" fill="white" width="50%" height="50%"/>
  </mask>
  
  <!-- path -->
  <circle id="path" cx="50" cy="50" r="30" fill="none"/>
  
  <!-- text -->
  <g fill="black">
    <text id="rotate">
      <textPath xlink:href="#path">LET'S GO LET'S GO</textPath>
    </text>
  </g>
  <g mask="url(#bg)">
    <use href="#rotate" fill="white"/>
  </g>
</svg>

但是，这样的选项在 Chrome 中无法正常显示..

谷歌搜索找到了 Chrome 的解决方案，但它在 Firefox（可能还有其他）中无法正确显示

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
}

svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: linear-gradient(0deg, black, black) no-repeat 0 0 / 50% 50%;
}

#rotate {
  transform-origin: center center;
  animation: Rotate 10s linear infinite;
}

#path {
  transform-origin: center center;
  transform: scale(+1,-1);
}

@keyframes Rotate {
  from {transform: rotate(-360deg);}
}

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- invert -->
  <mask id="bg">
    <rect x="0" y="0" fill="white" width="50%" height="50%"/>
  </mask>
  
  <!-- path -->
  <path d="M50 80A1 1 0 0050 20A1 1 0 0050 80" id="path" fill="none"/>
  
  <!-- text -->
  <g fill="black">
    <text id="rotate">
      <textPath xlink:href="#path">LET'S GO! LET'S GO!</textPath>
    </text>
  </g>
  <g mask="url(#bg)">
    <use href="#rotate" fill="white"/>
  </g>
</svg>

就这样。

Alexandr_TT · Answer 3 · 2022-03-25T01:37:43Z

在包括 MS Edge 在内的所有现代浏览器中都可以正常工作

<!-- https://ru.stackoverflow.com/a/1259289/28748 -->
<style> 
body {
margin:0;
padding:0;
}


svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#text {
  
  font-size:24px;
  font-weight:bold;
  mix-blend-mode: difference;
  letter-spacing:1;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 8s infinite linear;
  
}
</style>
<div>
<svg id="svg1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"    viewBox="-40 0 300 300" style="border:1px solid" >   
    <defs> 
     <mask id="msk">
       <path  d="M-23 150 A100, 100 0 0 1 245 150"   fill="grey" stroke="#111111" stroke-width="2" /> 
      <path  d="M245 150 A100,100 0 0 1 -23,150"   fill="black" stroke="#111111" stroke-width="2" /> 
      <text id="Text" fill="white"       y="-15"   x="10" >
        <textPath   xlink:href="#circ"> fill="white" LET`S GO!  LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text>
    </mask>
     
      <path id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
    
   </defs>
     
    <path  id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
           
    <rect x="-40" y="0" width="300" height="150" fill="black" />     
       <rect x="-40" y="150" width="300" height="150" fill="white" />    
  <text id="text" fill="white"  y="-15"   x="10" >
        <textPath   xlink:href="#circ">  LET`S GO!  LET`S GO! LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text> 
     
</svg>
</div>

Alexandr_TT · Answer 4 · 2022-03-26T15:35:36Z

经常有关于如何在 HTML 中定位 SVG 的问题。以下是我的尝试。

决定这样：

我将 svg 块放在父容器中<div class="container">，并且已经相对于其他块定位它。

为清楚起见，样式仅指 SVG 的内部内容，放置在 SVG 内部。它们也可以转移到主要样式，一切都会完全一样。

SVG 不断旋转的变体

body {
  display: flex;
}

.container { 
position:relative;
width:200px;
height:200px;
left:85%;
}

.rect {
position:relative;
width:200px;
height:700px;
background:#E6E6E6;
left:100%;
top:-50%;
} 
img {
  width: 700px;
}
.svg {
  position: absolute;
  top: -95.5%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

<div class="image"><img src="https://isstatic.askoverflow.dev/jSl5W.jpg"/>
<div class="container">
<svg id="svg1" class="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    viewBox="-40 0 300 300" >   
    <defs> 
     <mask id="msk">
       <path  d="M-23 150 A100, 100 0 0 1 245 150"   fill="grey"                  stroke="#111111" stroke-width="2" /> 
      <path  d="M245 150 A100,100 0 0 1 -23,150"   fill="black"                stroke="#111111" stroke-width="2" /> 
      <text id="Text" fill="white"       y="-15"   x="10" >
        <textPath   xlink:href="#circ"> fill="white" LET`S GO!  LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text> 
    </mask>
      <path id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
   </defs>
<style>
     @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
#text {
  font-size:24px;
  font-weight:bold;
  mix-blend-mode: difference;
  letter-spacing:12;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
}
</style>
    <path  id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
        <g id="G1" >   
      <rect x="-40" y="0" width="300" height="150" fill="black" />     
       <rect x="-40" y="150" width="300" height="150" fill="white" />
        </g>       
  <text id="text" fill="white"      y="-15"   x="10" >
        <textPath    xlink:href="#circ">  LET`S GO!  LET`S GO! LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text> 
     
</svg>
</div> 
  <div class="rect">   </div>  
  </div>

SVG 上的悬停旋转选项
添加样式：

 #G1:hover ~ #text {
animation-play-state: running;

body {
  display: flex;
}

.container { 
position:relative;
width:200px;
height:200px;
left:85%;
}

.rect {
position:relative;
width:200px;
height:700px;
background:#E6E6E6;
left:100%;
top:-50%;
} 
img {
  width: 700px;
}
.svg {
  position: absolute;
  top: -95.5%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

<div class="image"><img src="https://isstatic.askoverflow.dev/jSl5W.jpg"/>
<div class="container">
<svg id="svg1" class="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    viewBox="-40 0 300 300" >   
    <defs> 
     <mask id="msk">
       <path  d="M-23 150 A100, 100 0 0 1 245 150"   fill="grey"                  stroke="#111111" stroke-width="2" /> 
      <path  d="M245 150 A100,100 0 0 1 -23,150"   fill="black"                stroke="#111111" stroke-width="2" /> 
      <text id="Text" fill="white"       y="-15"   x="10" >
        <textPath   xlink:href="#circ"> fill="white" LET`S GO!  LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text> 
    </mask>
      <path id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
   </defs>
<style>
     @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
#text {
  font-size:24px;
  font-weight:bold;
  mix-blend-mode: difference;
  letter-spacing:12;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 6s infinite linear;
  animation-play-state: paused;
} 
 #G1:hover ~ #text {
animation-play-state: running;  
</style>
    <path  id="circ" d="M10 150 A100, 100 0 0 1 210 150M210 150 A100,100 0 0 1 10,150" fill="none" stroke="#111111" stroke-width="2" /> 
        <g id="G1" >   
      <rect x="-40" y="0" width="300" height="150" fill="black" />     
       <rect x="-40" y="150" width="300" height="150" fill="white" />
        </g>       
  <text id="text" fill="white"      y="-15"   x="10" >
        <textPath    xlink:href="#circ">  LET`S GO!  LET`S GO! LET`S GO! LET`S GO! LET`S GO!
        </textPath> 
      </text> 
     
</svg>
</div> 
  <div class="rect">   </div>  
  </div>

如何根据旋转时的位置使 SVG 图像的文本变为双色

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

如何根据旋转时的位置使 SVG 图像的文本变为双色

4 个回答

相关问题