主页 / 问题 / 1302705
Accepted
Denis
Asked:2022-07-07 08:45:17 +0000 UTC2022-07-07 08:45:17 +0000 UTC

如何在 <line> 中制作一个白色圆圈？

  • 772

这是布局

在此处输入图像描述

这是发生的事情

在此处输入图像描述

对绿色圆圈的定制感兴趣。

这是html

<line x1="15" y1="497" x2="15" y2="497" class="ct-point"></line>

这是CSS

.static_chart .ct-point {
    stroke-width: 20px;
    stroke: #8fbf6e;
}

如何为绿色圆圈添加白色背景？我无法进入 html，因为此 svg 代码是由图表插件生成的。单独使用 CSS 怎么能做到这一点？

jquery

3 个回答

  1. Best Answer

    SVG 中的一些实体有一个标记，它可以不同，但​​在我的示例中，我对开始和结束使用了相同的标记，对中间点使用相同的标记

    看例子

    <svg viewBox="0 0 640 200">
  <defs>
    <marker id="dot" viewBox="-1 -1 11 12" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <circle cx="4.5" cy="5" r="5" fill="#fff" stroke="red" stroke-width="1" />
    </marker>
  </defs>
  <polyline points="20,180 100,150 150,100 250,120 300,180" fill="none" stroke="#000" stroke-width="2" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>

    • 6

  2. 为了更好地理解解决方案的一点理论：

    标记可以应用于<line>, <polyline>, <polygon>, <path>，<rect>这是任何具有线条的 SVG 元素。
    开始标记marker-start="url(#mark)"连接到行的开头，结束标记连接到行marker-end="url(#mark)"的结尾，marker-mid="url(#mark)"在行的断点处。
    将有与线改变其方向的次数一样多的此类标记。在此处阅读有关参数、设置、调整和标记使用的更多信息。您可以在此处
    阅读可能的标记动画。

    此元素 - 标记将用于在图形的断点处创建圆圈。任何 SVG 形状都可以用作标记。在这个例子中，它是一个圆圈，里面有一个白色区域，有一条对应的绿色圆圈线。

    <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />

    灰色，用图案创建的坐标网格

    为了更容易理解代码，请阅读代码中的注释：

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern>
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M22 264v-59l78-57 100-51 100 20 97 31 101-31v147z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
                   <!-- Линия графика -->
<polyline fill="none" stroke="green" stroke-width="2" points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"  />
</svg>

    作为奖励，图表动画示例

              <!-- Анимация роста линии графика  -->
     <animate id="an" attributeName="stroke-dasharray" begin="svg1.click;an.end+1.5s"
         dur="4s" values="0,523;523,0" fill="freeze" />


    <!-- https://ru.stackoverflow.com/q/1302705/28748 -->
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>          
             <!--Определение паттерна сетки -->
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern> 
             <!--Определение формы маркера -->
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M22 264v-59l78-57 100-51 100 20 97 31 101-31v147z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
                   <!-- Линия графика -->

 <polyline fill="none" stroke="green" stroke-width="4" stroke-dasharray="0,523" points="20,210 100,150 200,100 300,120 400,150 500,120"> 
              <!-- Анимация роста линии графика  -->
     <animate id="an" attributeName="stroke-dasharray" begin="svg1.click;an.end+1.5s" dur="4s" values="0,523;523,0" fill="freeze" />
</polyline>

<polyline fill="none" stroke="green" stroke-width="2" stroke-dasharray="0,523" points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"/> 

   <text x="50%" text-anchor="middle" y="22" font-size="24px" fill="green">Click me </text>
    
</svg>

    动画连接器和标记的绘图

    使用遮罩动画，它穿过遮罩条，从而显示带有标记的图形线：

    <svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="520" height="320" viewBox="0 0 520 320" >  
<defs>          
             <!--Определение паттерна сетки -->
  <pattern id="patt"
             x="0" y="0" width="100" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#CACACA" fill-opacity="0.7">
             <rect x="0" y="0" width="100" height="30" />
            </g>
      </pattern> 
             <!--Определение формы маркера -->
      <marker id="mark" viewBox="0 0 22 24" refX="10" refY="10" markerWidth="20" markerHeight="20">
      <circle cx="10" cy="10" r="5" fill="#fff" stroke="#75C65D" stroke-width="2" />
    </marker>   
              <!-- Анимированная маска -->
    <mask id="mask">
       <rect width="100%" height="100%" fill="white"/>
       <polyline fill="none" stroke="black" stroke-width="20" stroke-dashoffset="542" stroke-dasharray="542"  points="12,215 100,150 200,100 300,120 400,150 510,118">
     <animate id="an" attributeName="stroke-dashoffset" begin="svg1.click;an.end+1.5s" dur="5s" values="523;0" repeatCount="1" fill="freeze" />
    </mask>
</defs> 

             <!-- Бледно-зелёный фон -->
<path fill="#F2F9F1" d="M10 264v-49l90-67 100-51 100 20 97 31 114-35v151z" />
                           <!-- сетка -->
<rect fill="url(#patt)" x="20" width="500" height="270" fill="none" stroke="grey" />
 
 <!-- Линия графика -->
   
<polyline fill="none" stroke="green" stroke-width="2"   points="20,210 100,150 200,100 300,120 400,150 500,120"  marker-end="url(#mark)" marker-start="url(#mark)" marker-mid="url(#mark)"/>
     
</polyline>  
                   <!-- Маскирующая полоса того же цвета, как фон  -->
                     <!-- которая прорезается маской и показывается полоса графика stroke="green" -->
    <polyline fill="none" stroke="#F2F9F1"  mask="url(#mask)" stroke-width="20" points="11,216 100,150 200,100 300,120 400,150 509,117"/>
    </polyline> 
        <text x="50%" text-anchor="middle" y="22" font-size="24px" fill="green">Click me </text>
</svg>

    • 1

  3. 只能通过 Javascript 来实现。我必须在图表的绿点上放置带有绿色框的白色圆圈。但它不适用于 iPhone。

    • -1

相关问题