主页 / 问题 / 987540
Accepted
Ясырев Михаил
Asked:2020-05-31 00:27:22 +0000 UTC2020-05-31 00:27:22 +0000 UTC

如何用从中心图像延伸的线条布置块？

  • 772

有没有人遇到过类似的块？

要布局的块的屏幕截图

我看不出这是如何实现的。在绝对定位的帮助下，不可能自适应地实现这一点。

UPD1：难点在于从中心画面延伸出来的线条的布局，文字块的布局对我来说没什么难的。

html

5 个回答

  1. 我希望上班族不会因为我用善意的笑话图片来表现他们每天的辛勤工作而被我冒犯。更多的是同情。
    说不定看着这张图你会心一笑，在日常生活中忍受暴君老板会变得容易些。

    要获得适用于所有现代浏览器的响应式应用程序，您需要执行以下步骤：

    • 我们将选定的图像加载到矢量编辑器中，并将 svg 画布的尺寸设置为等于位图的宽度和高度

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="962" height="732" viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">  

<image xlink:href="https://isstatic.askoverflow.dev/zdPiI.jpg" width="100%" height="100%" />
</svg>

    • 在矢量编辑器中，使用工具 -Рисовать кривые Безье 添加必要的线条轮廓以放置说明文本

    在此处输入图像描述

    • 我们将文件保存为 SVG 格式并通过优化器运行它 以获得干净的代码，而不需要来自Inkscape

    • 要使图像的中央圆形部分比图像背景的其余部分更亮，请在中央圆形具有属性的地方应用组合蒙版fill="white"，使其完全透明。

      rect有一个更暗的阴影fill="#978300"，所以背景会变暗。

    <mask id="msk1"> <rect fill="#978300" width="100%" height="100%"/> <circle fill="white" cx="488" cy="359.2" r="110" /> </mask>

    • 添加文本

    下面是完整的代码： 

    .container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
	<defs>
  <mask id="msk1">
   <rect fill="#BBA200" width="100%" height="100%"/>
     <circle fill="white" stroke-width="3" stroke="red"  cx="488" cy="359.2" r="110" /> 
  </mask>
</defs>

  <image xlink:href="https://isstatic.askoverflow.dev/zPxW2.jpg" width="100%" height="100%" mask="url(#msk1)" />
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" />
  
  <g fill="#45228B">
   <text x="493" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="120" y="160" font-size="20" > Простая, </text> 
  <text x="120" y="185" font-size="20" > проверенная </text> 
   <text x="120" y="215" font-size="20" > бизнес модель </text> 
  </g>
</svg>
</div>

    相同的实现技术具有不同的图片：

    .container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
	<defs>
  <mask id="msk1">
   <rect fill="#BBA200" width="100%" height="100%"/>
     <circle fill="white" stroke-width="3" stroke="red"  cx="488" cy="359.2" r="110" /> 
  </mask>
</defs>

  <image xlink:href="https://isstatic.askoverflow.dev/fRfB4.jpg" width="100%" height="100%" mask="url(#msk1)" />
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" />
  
  <g fill="#45228B">
   <text x="493" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="120" y="160" font-size="20" > Простая, </text> 
  <text x="120" y="185" font-size="20" > проверенная </text> 
   <text x="120" y="215" font-size="20" > бизнес модель </text> 
  </g>
</svg>
</div>

    • 10

  2. 这是 SVG 版本。

    我特意将视图框放在负数区域（viewbox="-100 -100 200 200"）的一半，这样坐标0,0就在图片的中心，这样就更容易从我的脑海中取出折线的点，而无需额外的算术。

    <svg viewbox="-100 -100 200 200" preserveAspectRatio="xMinYMin meet">

  <defs>
    <pattern id="image" height="1" width="1">
      <image xlink:href="https://isstatic.askoverflow.dev/3q67w.gif"
             height="70px" width="70px" ></image>
    </pattern>
  </defs>

  <image xlink:href="https://isstatic.askoverflow.dev/3q67w.gif" opacity="0.3" 
         x="-100" y="-100" height="200" width="200" transform="scale(-1,1)"></image>
  
  <g stroke="black" fill="none">
    <polyline points=" 20  90 -40  90 0 0"></polyline>
    <polyline points="-20 -90  40 -90 0 0"></polyline>
    <polyline points="-90 -50 -50 -50 0 0"></polyline>
    <polyline points="-90  50 -50  50 0 0"></polyline>
    <polyline points=" 90  50  50  50 0 0"></polyline>
    <polyline points=" 90 -50  50 -50 0 0"></polyline>
  </g>  

  <circle r="35" stroke="black" fill="url(#image)"></circle>
  
  <text x="-20" y="88">hello</text>
  <text y="-78">    
    <tspan x="-20" >row 1</tspan>
    <tspan x="-20" dy="20px">row 2</tspan>
  </text>
</svg>

    • 8
  3. Best Answer

    使用两个图像的选项

    此解决方案用于pattern在中心添加第二个圆形图像。

    该解决方案是自适应的，当调整浏览器窗口的大小以及在任何小工具上查看时，布局不会中断。

    • 使用以下命令添加背景图像：
    <image xlink:href="https://isstatic.askoverflow.dev/ij4A4.jpg" y="-70" width="100%" height="100%" opacity="0.45" />

    由命令变暗 -opacity="0.45"
    由坐标定位 -x和y
    图像完全填满父块<div class="container">，可以作为独立元素插入网页上的任何位置。

    • 圆形图像添加在背景图像之上 <pattern>
     <pattern id="ptn1"
          x="-60"   
          width="220"
          height="250"
           patternUnits="userSpaceOnUse">
  <image width="220" 
         height="220" 
          preserveAspectRatio="none"
         xlink:href="https://isstatic.askoverflow.dev/CD9UI.jpg"/>
 </pattern>

    以下是完整的应用程序代码：

    .container {
 width:100%;
 height:100%;
 }
 .s0{
    fill:none;
    stroke-width:2;
    stroke:#45228B;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://isstatic.askoverflow.dev/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://isstatic.askoverflow.dev/ij4A4.jpg" y="-70" width="100%" height="100%" opacity="0.5" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)" stroke="white"  cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#45228B" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

    过滤器选项

    如果选择的图片在内容上适合你，但由于设计需要你需要改变背景色的颜色或图形的颜色，那么完全不需要在 Photoshop 中对图片进行细化，你可以重新着色它使用过滤器的组合：feflood, feComposite,feBlend
    应用这些过滤器的技术在我们网站上的主题中有详细说明

    #1 绘画人物选项

    过滤器<feblend>使用运算符mode="lighten"

    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />

    .container {
 width:100%;
 height:100%;
 }
 .s0{
    fill:none;
    stroke-width:2;
    stroke:#D57700;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
   <filter x="0" y="0" width="1" height="1" id="solid">
     <feFlood result="flood" flood-color="#9F46CB" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
    </filter> 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://isstatic.askoverflow.dev/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://isstatic.askoverflow.dev/ij4A4.jpg" y="-70" width="100%" height="100%"  filter="url(#solid)" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#D57700"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)" stroke="white"  cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#D57700" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

    #2 绘制背景的选项

    过滤器<feblend>使用运算符mode="darken"

    .container {
 width:100%;
 height:100%;
 }
 .s0{
    fill:none;
    stroke-width:2;
    stroke:#E1E1E1;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
   <filter x="0" y="0" width="1" height="1" id="solid">
     <feFlood result="flood" flood-color="#9F46CB" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="darken" />
  </filter>
    </filter> 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://isstatic.askoverflow.dev/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://isstatic.askoverflow.dev/ij4A4.jpg" y="-7" width="100%" height="100%"  filter="url(#solid)" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#E1E1E1"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)"   cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#E1E1E1" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

    • 7

  4. 使用伪元素和 CSS 的选项。您可以改用afterSVG 元素。

    .title {
  position: relative;
  width: 300px;
  border-bottom: 1.5px solid black;
  padding: 5px 10px;
}
.title::after {
  position: absolute;
  right: 16px;
  bottom: -69px;
  width: 100%;
  height: 1.5px;
  background-color: black;
  transform: translateX(100%) rotate(25deg);
  content: "";
}
    <div class="title">lorem ipsum</div>

    • 1

  5. CSS 选项（查看全屏）。

    body {
  margin: 0;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: #fff;
}


.section::before,
.section::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.section::before {
  background: url('https://i.imgur.com/a0ZySrQ.png') no-repeat center center / cover;
  filter: grayscale(100%) contrast(200%);
}

.section::after {
  background: rgba(92,0,155,.65);
}

.circle {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.circle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: url('https://i.imgur.com/a0ZySrQ.png') no-repeat center center / cover;
}

.circle .item {
  display: block;
  width: 170px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.circle .item .title {
  font-weight: bold;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  margin-bottom: 3px;
  position: relative;
}

.circle .item .title::after {
  content: '';
  display: block;
  height: 1px;
  background: #fff;
  position: absolute;
}

.circle .item:nth-child(1) {
  top: calc(50% - 200px);
  left: 50%;
}

.circle .item:nth-child(1) .title::after {
  width: 133px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(-60deg);
}

.circle .item:nth-child(2) {
  top: calc(50% - 100px);
  left: calc(50% + 250px);
}

.circle .item:nth-child(2) .title::after {
  width: 96px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(150deg);
}

.circle .item:nth-child(3) {
  top: calc(50% + 100px);
  left: calc(50% + 250px);
}

.circle .item:nth-child(3) .title::after {
  width: 84px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(-150deg);
}

.circle .item:nth-child(4) {
  width: 200px;
  top: calc(50% + 200px);
  left: 50%;
}

.circle .item:nth-child(4) .title {
  padding-left: 30px;
}

.circle .item:nth-child(4) .title::after {
  width: 149px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(-65deg);
}

.circle .item:nth-child(5) {
  top: calc(50% + 100px);
  left: calc(50% - 250px);
}

.circle .item:nth-child(5) .title::after {
  width: 86px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(145deg);
}

.circle .item:nth-child(6) {
  top: calc(50% - 100px);
  left: calc(50% - 250px);
}

.circle .item:nth-child(6) .title::after {
  width: 104px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(-145deg);
}


.circle .item .msg {
  font-size: 80%;
}
    <div class="section">
  <div class="circle">
    <div class="item">
      <div class="title">Быстрый старт</div>
      <div class="msg">При четком следовании инструкциям вы откроете центр через 1,5 месяца.</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Низкая стоимость входа в бизнес</div>
      <div class="msg">Для открытия одного центра вам понадобиться всего от 870 000 руб (включая все расходы)</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Бизнес - любимое дело</div>
      <div class="msg">Это бизнес станет любимым как только вы увидите эмоции ваших маленьких клиентов и их родителей</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Система обучения вашего персонала и помощь в его подборе</div>
      <div class="msg"></div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Маркетинговая поддержка</div>
      <div class="msg">Все макеты рекламных материалов, размещение на федеральном сайте, в соц. сетях и четкие рекомендации по поиску клиентов.</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Простая проверенная бизнес-модель</div>
      <div class="msg">Мы даём вам четкий алгоритм по открытию центра и стратегию продвижению, которые проверены в реальной жизни.</div>
    </div>
  </div>
</div>

    • 1

相关问题