Блог

Итак, я редактирую эти часы уже целый день, мне удалось удалить фон и дату/время по центру, как и предполагалось, я также хотел поместить их сбоку рамки, чтобы при добавлении я не тратил место впустую. Оказывается, хотя этот код соответствует тому, что я хотел, при попытке изменить его размер (щелчок и изменение размера рамки) часы сохраняют свой размер. У него есть этот скрипт, позволяющий изменять его размер, но, к сожалению, он не работает. Я понятия не имею, как это исправить. Я попытался использовать 100% вместо pxs, изменив ссылки на auto, но все равно не повезло.

 lt;stylegt; @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,900amp;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; } lt;/stylegt;   lt;scriptgt;  window.console = window.console || function(t) {}; lt;/scriptgt;       lt;scriptgt;  if (document.location.search.match(/type=embed/gi)) {  window.parent.postMessage("resize", "*");  } lt;/scriptgt;   lt;/headgt;  lt;body translate="no" gt;  lt;svggt;  lt;defsgt;  lt;pattern id="dotPattern"  x="0" y="0" width="050" height="10"  patternUnits="userSpaceOnUse"gt;  lt;circle class="bgDot" cx="5" cy="5" r="2" /gt;  lt;/patterngt;    lt;radialGradient id="backHoleBelowClock" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"gt;  lt;stop offset="50%" style="stop-color:rgb(0,0,0);stop-opacity:0.7"/gt;  lt;stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0"/gt;  lt;/radialGradientgt;   lt;radialGradient id="blackVignette" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"gt;  lt;stop offset="40%" style="stop-color:rgb(0,0,0);stop-opacity:0" /gt;  lt;stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /gt;  lt;/radialGradientgt;   lt;filter id="glow"gt;  lt;feGaussianBlur stdDeviation="2.5" result="coloredBlur"/gt;  lt;feMergegt;  lt;feMergeNode in="coloredBlur"/gt;  lt;feMergeNode in="SourceGraphic"/gt;  lt;/feMergegt;  lt;/filtergt;     lt;filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"gt;  lt;feGaussianBlur in="SourceAlpha" stdDeviation="3" result="shadow"/gt;  lt;feOffset dx="1" dy="1"/gt;  lt;feMergegt;  lt;feMergeNode/gt;  lt;feMergeNode in="SourceGraphic"/gt;  lt;/feMergegt;  lt;/filtergt;     lt;/defsgt;     lt;!-- Clock objects --gt;  lt;circle class="clockCircle hour" cx="190" cy="240" r="150" stroke-width="6" /gt;  lt;path id="arcHour" class="clockArc hour" stroke-width="6" stroke-linecap="round" filter="url(#glow)" /gt;  lt;circle class="clockDot hour" r="8" filter="url(#glow)" /gt;   lt;circle class="clockCircle minute" cx="190" cy="240" r="170" stroke-width="3" /gt;  lt;path id="arcMinute" class="clockArc minute" stroke-width="3" stroke-linecap="round" filter="url(#glow)" /gt;  lt;circle class="clockDot minute" r="5" filter="url(#glow)" /gt;    lt;!-- Caption objects --gt;  lt;text id="time" class="caption timeText" x="190" y="250" stroke-width="0" text-anchor="middle" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;    lt;text id="day" class="caption dayText" x="190" y="189" stroke-width="0" text-anchor="end" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;  lt;text id="date" class="caption dateText" x="85" y="300" stroke-width="0" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;    lt;/svggt;  lt;script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"gt;lt;/scriptgt;   lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'gt;lt;/scriptgt; lt;script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js'gt;lt;/scriptgt; lt;script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'gt;lt;/scriptgt; lt;script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5'gt;lt;/scriptgt;  lt;script id="rendered-js" gt; /* 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 lt;= 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  lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt;   

(Извините, я знаю, что это длинный код) Это будет использоваться в качестве моего нового часового времени для множества приложений, от цифровых радиостанций до смарт-экранов, и я действительно хочу использовать этот дизайн, так как он позволит легко сочетаться с большинством цветов, которые мы используем.

Скорее всего, вам понадобится 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; } 

 lt;div class="resize"gt; lt;svg viewBox="0 0 500 500" gt;  lt;defsgt;  lt;pattern id="dotPattern"  x="0" y="0" width="50" height="10" patternUnits="userSpaceOnUse"gt;  lt;circle class="bgDot" cx="5" cy="5" r="2" /gt;  lt;/patterngt;    lt;radialGradient id="backHoleBelowClock" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"gt;  lt;stop offset="50%" style="stop-color:rgb(0,0,0);stop-opacity:0.7"/gt;  lt;stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0"/gt;  lt;/radialGradientgt;   lt;radialGradient id="blackVignette" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"gt;  lt;stop offset="40%" style="stop-color:rgb(0,0,0);stop-opacity:0" /gt;  lt;stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /gt;  lt;/radialGradientgt;   lt;filter id="glow"gt;  lt;feGaussianBlur stdDeviation="2.5" result="coloredBlur"/gt;  lt;feMergegt;  lt;feMergeNode in="coloredBlur"/gt;  lt;feMergeNode in="SourceGraphic"/gt;  lt;/feMergegt;  lt;/filtergt;     lt;filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"gt;  lt;feGaussianBlur in="SourceAlpha" stdDeviation="3" result="shadow"/gt;  lt;feOffset dx="1" dy="1"/gt;  lt;feMergegt;  lt;feMergeNode/gt;  lt;feMergeNode in="SourceGraphic"/gt;  lt;/feMergegt;  lt;/filtergt;     lt;/defsgt;     lt;!-- Clock objects --gt;  lt;circle class="clockCircle hour" cx="190" cy="240" r="150" stroke-width="6" /gt;  lt;path id="arcHour" class="clockArc hour" stroke-width="6" stroke-linecap="round" filter="url(#glow)" /gt;  lt;circle class="clockDot hour" r="8" filter="url(#glow)" /gt;   lt;circle class="clockCircle minute" cx="190" cy="240" r="170" stroke-width="3" /gt;  lt;path id="arcMinute" class="clockArc minute" stroke-width="3" stroke-linecap="round" filter="url(#glow)" /gt;  lt;circle class="clockDot minute" r="5" filter="url(#glow)" /gt;    lt;!-- Caption objects --gt;  lt;text id="time" class="caption timeText" x="190" y="250" stroke-width="0" text-anchor="middle" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;    lt;text id="day" class="caption dayText" x="190" y="189" stroke-width="0" text-anchor="end" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;  lt;text id="date" class="caption dateText" x="85" y="300" stroke-width="0" alignment-baseline="middle" filter="url(#shadow)"gt;lt;/textgt;  lt;/svggt; lt;/divgt;