HTML 时钟自动调整大小保持比例

HTML Clock to resize automatically keeping the proportion

好的,所以我已经编辑了这个时钟一天了,我设法删除了背景并按预期居中 date/time,我还想把它放在框架的一侧,所以当添加我不浪费 space。事实证明,虽然这段代码是我想要的方式,但当我尝试调整它的大小时(单击并调整框架的大小)时钟保持其大小。它有这个脚本来调整它的大小,但不幸的是它不起作用。我不知道如何解决这个问题了。我尝试使用 100% 而不是 pxs,将引用更改为 auto,仍然没有成功。

<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

svg {
  position: auto;
  width: 100%;
  height: 100%;
}

.bgDot {
  stroke: none;
  fill: #215769;
}

.clockCircle {
  fill: none;
  stroke: #2a2a2a;
}

.clockArc {
  fill: none;
  stroke: #1bbccb;
}

.clockDot {
  fill: #e9fafc;
}

.caption {
  font-family: "Source Sans Pro";
  font-weight: 300;
  fill: White;
}

.dayText {
  font-size: 1.7rem;
}

.dateText {
  font-size: 2.5rem;
  font-weight: 400;
}

.timeText {
  font-family: "Open Sans";
  font-size: 5rem;
  font-weight: 600;
  fill: White;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <svg>
    <defs>
        <pattern id="dotPattern"
                         x="0" y="0" width="050" height="10"
                         patternUnits="userSpaceOnUse">
                <circle class="bgDot" cx="5" cy="5" r="2" />
        </pattern>
        
        <radialGradient id="backHoleBelowClock" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="50%"  style="stop-color:rgb(0,0,0);stop-opacity:0.7"/>
            <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0"/>
        </radialGradient>

        <radialGradient id="blackVignette" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="40%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </radialGradient>

        <filter id="glow">
                <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                </feMerge>
        </filter>       
        
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="shadow"/>
            <feOffset dx="1" dy="1"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>       
        
    </defs>

    
    <!-- Clock objects -->
    <circle class="clockCircle hour" cx="190" cy="240" r="150" stroke-width="6" />
    <path id="arcHour" class="clockArc hour" stroke-width="6" stroke-linecap="round" filter="url(#glow)" />
    <circle class="clockDot hour" r="8" filter="url(#glow)" />

    <circle class="clockCircle minute" cx="190" cy="240" r="170" stroke-width="3" />
    <path id="arcMinute" class="clockArc minute" stroke-width="3" stroke-linecap="round" filter="url(#glow)" />
    <circle class="clockDot minute" r="5" filter="url(#glow)" />
    
    <!-- Caption objects -->
    <text id="time" class="caption timeText" x="190" y="250" stroke-width="0" text-anchor="middle" alignment-baseline="middle"  filter="url(#shadow)"></text>
    
    <text id="day" class="caption dayText" x="190" y="189" stroke-width="0" text-anchor="end" alignment-baseline="middle"  filter="url(#shadow)"></text>
    <text id="date" class="caption dateText" x="85" y="300" stroke-width="0" alignment-baseline="middle" filter="url(#shadow)"></text>

    
</svg>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5'></script>
      <script id="rendered-js" >
/*
Inspired by https://dribbble.com/shots/2004657-Alarm-Clock-concept
 */
var describeArc, polarToCartesian, setCaptions;

polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
  var angleInRadians;
  angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians) };

};

describeArc = function (x, y, radius, startAngle, endAngle) {
  var arcSweep, end, start;
  start = polarToCartesian(x, y, radius, endAngle);
  end = polarToCartesian(x, y, radius, startAngle);
  arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
  return ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ');
};

setCaptions = function () {
  var dot, hour, hourArc, minArc, minute, now, pos;
  now = new Date();
  hour = now.getHours() % 12;
  minute = now.getMinutes();
  hourArc = (hour * 60 + minute) / (12 * 60) * 360;
  minArc = minute / 60 * 360;
  $('.clockArc.hour').attr('d', describeArc(190, 240, 150, 0, hourArc));
  $('.clockArc.minute').attr('d', describeArc(190, 240, 170, 0, minArc));
  $('.clockDot.hour').attr('d', describeArc(190, 240, 150, hourArc - 3, hourArc));
  $('.clockDot.minute').attr('d', describeArc(190, 240, 170, minArc - 1, minArc));
  dot = $(".clockDot.hour");
  pos = polarToCartesian(190, 240, 150, hourArc);
  dot.attr("cx", pos.x);
  dot.attr("cy", pos.y);
  dot = $(".clockDot.minute");
  pos = polarToCartesian(190, 240, 170, minArc);
  dot.attr("cx", pos.x);
  dot.attr("cy", pos.y);
  return $('#time').text(moment().format('H:mm'));
};

$('#day').text(moment().format('dddd'));

$('#date').text(moment().format('MMMM D'));

setCaptions();

setInterval(function () {
  return setCaptions();
}, 10 * 1000);

$(function () {
  TweenMax.staggerFrom(".clockArc", .5, {
    drawSVG: 0,
    ease: Power3.easeOut },
  0.3);
  TweenMax.from("#time", 1.0, {
    attr: {
      y: 350 },

    opacity: 0,
    ease: Power3.easeOut,
    delay: 0.5 });

  TweenMax.from(".dayText", 1.0, {
    attr: {
      y: 310 },

    opacity: 0,
    delay: 1.0,
    ease: Power3.easeOut });

  return TweenMax.from(".dateText", 1.0, {
    attr: {
      y: 350 },

    opacity: 0,
    delay: 1.5,
    ease: Power3.easeOut });

});

// ---
// generated by coffee-script 1.9.2
//# sourceURL=pen.js
    </script>

</body>

</html>

(抱歉,我知道这是一个长代码)这将用作我的新时钟时间,用于从数字收音机到智能屏幕的多种应用,我真的很想使用这个设计,因为它可以很容易地与我们使用的大多数颜色。

您很可能需要将 viewBox 属性添加到您的 svg 元素中。例如

<svg viewBox="0 0 500 500" >

.resize{
position:relative;
resize:both;
width:100px;
border: 1px solid red;
overflow:hidden;
}


body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}



.bgDot {
  stroke: none;
  fill: #215769;
}

.clockCircle {
  fill: none;
  stroke: #2a2a2a;
}

.clockArc {
  fill: none;
  stroke: #1bbccb;
}

.clockDot {
  fill: #e9fafc;
}

.caption {
  font-family: "Source Sans Pro";
  font-weight: 300;
  fill: White;
}

.dayText {
  font-size: 1.7rem;
}

.dateText {
  font-size: 2.5rem;
  font-weight: 400;
}

.timeText {
  font-family: "Open Sans";
  font-size: 5rem;
  font-weight: 600;
  fill: White;
}
<div class="resize">
<svg viewBox="0 0 500 500" >
    <defs>
        <pattern id="dotPattern"
                x="0" y="0" width="50" height="10" patternUnits="userSpaceOnUse">
                <circle class="bgDot" cx="5" cy="5" r="2" />
        </pattern>
        
        <radialGradient id="backHoleBelowClock" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="50%"  style="stop-color:rgb(0,0,0);stop-opacity:0.7"/>
            <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0"/>
        </radialGradient>

        <radialGradient id="blackVignette" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="40%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
    </radialGradient>

        <filter id="glow">
                <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                </feMerge>
        </filter>       
        
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="shadow"/>
            <feOffset dx="1" dy="1"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>       
        
    </defs>

    
    <!-- Clock objects -->
    <circle class="clockCircle hour" cx="190" cy="240" r="150" stroke-width="6" />
    <path id="arcHour" class="clockArc hour" stroke-width="6" stroke-linecap="round" filter="url(#glow)" />
    <circle class="clockDot hour" r="8" filter="url(#glow)" />

    <circle class="clockCircle minute" cx="190" cy="240" r="170" stroke-width="3" />
    <path id="arcMinute" class="clockArc minute" stroke-width="3" stroke-linecap="round" filter="url(#glow)" />
    <circle class="clockDot minute" r="5" filter="url(#glow)" />
    
    <!-- Caption objects -->
    <text id="time" class="caption timeText" x="190" y="250" stroke-width="0" text-anchor="middle" alignment-baseline="middle"  filter="url(#shadow)"></text>
    
    <text id="day" class="caption dayText" x="190" y="189" stroke-width="0" text-anchor="end" alignment-baseline="middle"  filter="url(#shadow)"></text>
    <text id="date" class="caption dateText" x="85" y="300" stroke-width="0" alignment-baseline="middle" filter="url(#shadow)"></text>

</svg>
</div>