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

Posted

技术标签:

【中文标题】HTML时钟自动调整大小保持比例【英文标题】：HTML Clock to resize automatically keeping the proportion 【发布时间】：2022-01-03 21:59:40 【问题描述】：

好的，所以我已经编辑了这个时钟一天了，我设法按预期删除了背景和居中的日期/时间，我还想把它放在框架的一侧，所以在添加时我没有'不浪费空间。事实证明，虽然这段代码是我想要的方式，但当我尝试调整它的大小（单击并调整框架的大小）时，时钟会保持它的大小。它有这个脚本可以调整它的大小，但不幸的是它不起作用。我不知道如何解决这个问题了。我尝试使用 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"  
                         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%"  >
            <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- />
    <path id="arcHour" class="clockArc hour" stroke- 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- />
    <path id="arcMinute" class="clockArc minute" stroke- 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- text-anchor="middle" alignment-baseline="middle"  filter="url(#shadow)"></text>
    
    <text id="day" class="caption dayText" x="190" y="189" stroke- text-anchor="end" alignment-baseline="middle"  filter="url(#shadow)"></text>
    <text id="date" class="caption dateText" x="85" y="300" stroke- 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>

（对不起，我知道这是一个长代码）这将用作我的新时钟时间，用于从数字收音机到智能屏幕的多种应用程序，我真的很想使用这种设计，因为它可以很容易地与大多数应用程序结合使用我们使用的颜色。

【问题讨论】：

【参考方案1】：

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

&lt;svg viewBox="0 0 500 500" &gt;

.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"   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%"  >
            <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- />
    <path id="arcHour" class="clockArc hour" stroke- 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- />
    <path id="arcMinute" class="clockArc minute" stroke- 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- text-anchor="middle" alignment-baseline="middle"  filter="url(#shadow)"></text>
    
    <text id="day" class="caption dayText" x="190" y="189" stroke- text-anchor="end" alignment-baseline="middle"  filter="url(#shadow)"></text>
    <text id="date" class="caption dateText" x="85" y="300" stroke- alignment-baseline="middle" filter="url(#shadow)"></text>

</svg>
</div>

【讨论】：

太棒了！它成功了:)

以上是关于HTML时钟自动调整大小保持比例的主要内容，如果未能解决你的问题，请参考以下文章

调整大小后通过鼠标连续调整其余图像的大小，并保持比例

如何禁用堆栈视图自动调整大小

以统一大小调整多个图像的大小并保持比例

调整引导导航栏品牌标志的大小保持比例

如何按比例调整图像大小/保持纵横比？

调整图像大小 - 保持比例 - 没有背景图像