如何为网络和移动设备制作SVG响应式进度条？

时间：2015-12-28 10:12:00

标签： javascript css3 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>

3 个答案:

答案 0 :(得分：1)

这就是我所做的：

  • 删除了svg＆＃39; width和height
  • 添加了viewbox - 阅读here
  • 给SVG一个绝对位置并将其包裹在container内 - 有关更多示例，请参阅here

＆＃13;
＆＃13; 
svg {
    position: absolute;
    top: 0;
    left: 0;
}
.container {
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
}
＆＃13; 
<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
     <div class="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  y="0" x="0" viewBox="0 0 850 200">
         <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>
       </div>
   </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用viewBox创建响应式SVG。我的高度和宽度也是100％。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

所有html5元素都非常敏感，您只需要将所有宽度和Xcoordinate - 从PX值更改为％

  <svg  version="1.1" height="200"  width="100%" 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="94%" y="100" x="5%"/>
     </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="5.6%">(++)</text>
        <text text-anchor="start" font-size="11" font-weight="bold" font-family="Gotham-Book" stroke-width="1" fill="#000000" y="137" x="94%">(--)</text>
        <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="5%">DEFICIENT</text>
        <text text-anchor="start" font-size="10" font-weight="normal" font-family="Gotham-Book" stroke-width="1" fill="#8B97A3" y="95" x="31.87%">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="55.62%">NORMAL</text>
        <!--  movable vertical lines  : user exact value with ballon -->
        <!--  line 1  --> 
     </g>
  </svg>

DEMO

干杯，

阿肖克

相关问题
最新问题