javascript - 如何为 Web 和移动设备制作 SVG 响应式进度条?

标签 javascript css svg twitter-bootstrap-3

我正在制作一个应用程序,我想要一个响应式 SVG 进度条。 我的代码在下面,但进度条没有响应。如何实现响应能力?

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <svg  version="1.1" height="200"  width="850" y="0" x="0">
         <g>
            <defs>
               <linearGradient spreadMethod="reflect" y2="0%" x2="100%" y1="0%" x1="0%" id="myLinearGradient3">
                  <stop stop-opacity="1" stop-color="#D7565A" offset="10%"/>
                  <stop stop-opacity="1" stop-color="#E58E5F" offset="25%"/>
                  <stop stop-opacity="1" stop-color="#E58E5F" offset="26%"/>
                  <stop stop-opacity="1" stop-color="#EAEAEA" offset="57%"/>
                  <stop stop-opacity="1" stop-color="#FFF34D" offset="58%"/>
                  <stop stop-opacity="1" stop-color="#EAEAEA" offset="77%"/>
                  <stop stop-opacity="1" stop-color="#4dd4ff" offset="78%"/>
               </linearGradient>
            </defs>
            <!--  Gradient table -->
            <rect style="fill:url(#myLinearGradient3); stroke: #8D99A6; stroke-width: 0.5;" ry="10" rx="10" height="20" width="800" y="100" x="25"/>
         </g>
         <!--  Ruler   -->
         <!--    ballons    -->
         <g>
            <text text-anchor="start" font-size="11" font-weight="bold" font-family="Gotham-Book" stroke-width="1" fill="#000000" y="137" x="45">(++)</text>
            <text text-anchor="start" font-size="11" font-weight="bold" font-family="Gotham-Book" stroke-width="1" fill="#000000" y="137" x="795">(--)</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="40">DEFICIENT</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="255">SUB-NORMAL</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="445">NORMAL</text>
            <!--  movable vertical lines  : user exact value with ballon -->
            <!--  line 1  --> 
         </g>
      </svg>
   </body>
</html>

最佳答案

您将使用 viewBox 来创建响应式 SVG。我也将高度和宽度设为 100%。

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <svg height="100%" width="100%" viewBox="0 0 1000 4000" preserveAspectRatio="none">
         <g>
            <defs>
               <linearGradient spreadMethod="reflect" y2="0%" x2="100%" y1="0%" x1="0%" id="myLinearGradient3">
                  <stop stop-opacity="1" stop-color="#D7565A" offset="10%"/>
                  <stop stop-opacity="1" stop-color="#E58E5F" offset="25%"/>
                  <stop stop-opacity="1" stop-color="#E58E5F" offset="26%"/>
                  <stop stop-opacity="1" stop-color="#EAEAEA" offset="57%"/>
                  <stop stop-opacity="1" stop-color="#FFF34D" offset="58%"/>
                  <stop stop-opacity="1" stop-color="#EAEAEA" offset="77%"/>
                  <stop stop-opacity="1" stop-color="#4dd4ff" offset="78%"/>
               </linearGradient>
            </defs>
            <!--  Gradient table -->
            <rect style="fill:url(#myLinearGradient3); stroke: #8D99A6; stroke-width: 0.5;" ry="10" rx="10" height="20" width="800" y="100" x="25"/>
         </g>
         <!--  Ruler   -->
         <!--    ballons    -->
         <g>
            <text text-anchor="start" font-size="11" font-weight="bold" font-family="Gotham-Book" stroke-width="1" fill="#000000" y="137" x="45">(++)</text>
            <text text-anchor="start" font-size="11" font-weight="bold" font-family="Gotham-Book" stroke-width="1" fill="#000000" y="137" x="795">(--)</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="40">DEFICIENT</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="255">SUB-NORMAL</text>
            <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="445">NORMAL</text>
            <!--  movable vertical lines  : user exact value with ballon -->
            <!--  line 1  --> 
         </g>
      </svg>
   </body>
</html>

关于javascript - 如何为 Web 和移动设备制作 SVG 响应式进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34491509/

相关文章:

javascript - 从 chrome 中的输入类型复选框中删除阴影?

javascript - D3 map 投影不显示 map

svg - 如何在 svg 中定义的路径周围环绕文本(使用 css)?

javascript - 文档选择中的索引错误,而所选文本有一个点

javascript - 如何将工具栏添加到 BokehJS 绘图?

html - 如何在两个部分之间定位元素同时响应?

html - 从canvas转移到svg

javascript - 当代码输出为空时如何打印 "not found"?

javascript - react native 的 setState 中的 key/label 是如何推断出来的?

jQuery 检测 css 类是否有背景图片