Маштабирование svg

[radrigo 180]

Всем привет.

 

Помогите понять как идёт маштабирование svg иконок в стандартных шаблонах dle

 

Допустим есть такая иконка

 

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-vk" viewBox="0 0 868 1024">
      <title>vk</title>
      <path class="path1" d="M807.051 555.39c-43.39-43.39-95.458-69.424-164.881-86.78v0c43.39-17.356 86.78-52.068 112.814-86.78 26.034-43.39 43.39-86.78 43.39-138.847 0-43.39-8.678-86.78-26.034-112.814-17.356-34.712-52.068-60.746-86.78-78.102-43.39-26.034-78.102-34.712-121.492-43.39s-104.136-8.678-182.237-8.678h-381.831v1041.356h433.898c78.102 0 138.847-8.678 182.237-17.356 52.068-17.356 95.458-34.712 130.169-69.424 34.712-26.034 60.746-60.746 78.102-95.458 17.356-43.39 34.712-86.78 34.712-138.847 8.678-69.424-8.678-121.492-52.068-164.881zM503.322 355.797c-8.678 17.356-17.356 26.034-43.39 43.39-17.356 8.678-34.712 8.678-60.746 8.678-17.356 0-52.068 0-95.458 0h-34.712v-216.949h17.356c52.068 0 86.78 0 112.814 0s43.39 8.678 60.746 8.678c17.356 8.678 34.712 17.356 43.39 34.712 8.678 26.034 17.356 43.39 17.356 60.746 0 26.034-8.678 43.39-17.356 60.746zM572.746 781.017c-17.356 26.034-34.712 34.712-60.746 52.068-26.034 8.678-52.068 17.356-78.102 17.356s-78.102 0-147.525 0h-17.356v-260.339h52.068c52.068 0 86.78 0 112.814 0s52.068 0 69.424 8.678c26.034 8.678 52.068 26.034 60.746 43.39 17.356 17.356 17.356 43.39 17.356 78.102 8.678 26.034 0 43.39-8.678 60.746z"></path>
    </symbol>
  </defs>
</svg>

 

Размер иконки как я понимаю будет зависеть от родительского блока и регулируется параметром viewBox в symbol, чем значение меньше, тем больше картинка и наоборот.

 

Помогите понять как эти цифры определяют размер.

 

Изменено 4 июня 2016 пользователем radrigo

[celsoft 6 076]

https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx

 

В svg в параметре viewBox="0 0 868 1024" вы задаете размеры картинки где 0 0 это координаты левого верхнего угла прямоугольника, а 868 1024 правого нижнего.

[radrigo 180]

6 часов назад, celsoft сказал:

https://msdn.microsoft.com/ru-ru/library/gg589508(v=vs.85).aspx

 

В svg в параметре viewBox="0 0 868 1024" вы задаете размеры картинки где 0 0 это координаты левого верхнего угла прямоугольника, а 868 1024 правого нижнего.

Ясно, спасибо=)

 

Подскажите ещё, какую функцию выполняет огромный кусок кода в начале файла lib.js, во всех стандартных шаблонах он немного отличается.

if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1||e[0]>2)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3")}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var n=t(this),a=n.data("bs.carousel"),s=t.extend({},i.DEFAULTS,n.data(),"object"==typeof e&&e),r="string"==typeof e?e:s.slide;a||n.data("bs.carousel",a=new i(this,s)),"number"==typeof e?a.to(e):r?a[r]():s.interval&&a.pause().cycle()})}var i=function(e,i){this.$element=t(e),this.$indicators=this.$element.find(".carousel-indicators"),this.options=i,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",t.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",t.proxy(this.pause,this)).on("mouseleave.bs.carousel",t.proxy(this.cycle,this))};i.VERSION="3.3.6",i.TRANSITION_DURATION=600,i.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},i.prototype.keydown=function(t){if(!/input|textarea/i.test(t.target.tagName)){switch(t.which){case 37:this.prev();break;case 39:this.next();break;default:return}t.preventDefault()}},i.prototype.cycle=function(e){return e||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(t.proxy(this.next,this),this.options.interval)),this},i.prototype.getItemIndex=function(t){return this.$items=t.parent().children(".item"),this.$items.index(t||this.$active)},i.prototype.getItemForDirection=function(t,e){var i=this.getItemIndex(e),n="prev"==t&&0===i||"next"==t&&i==this.$items.length-1;if(n&&!this.options.wrap)return e;var a="prev"==t?-1:1,s=(i+a)%this.$items.length;return this.$items.eq(s)},i.prototype.to=function(t){var e=this,i=this.getItemIndex(this.$active=this.$element.find(".item.active"));return t>this.$items.length-1||0>t?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){e.to(t)}):i==t?this.pause().cycle():this.slide(t>i?"next":"prev",this.$items.eq(t))},i.prototype.pause=function(e){return e||(this.paused=!0),this.$element.find(".next, .prev").length&&t.support.transition&&(this.$element.trigger(t.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},i.prototype.next=function(){return this.sliding?void 0:this.slide("next")},i.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},i.prototype.slide=function(e,n){var a=this.$element.find(".item.active"),s=n||this.getItemForDirection(e,a),r=this.interval,o="next"==e?"left":"right",l=this;if(s.hasClass("active"))return this.sliding=!1;var d=s[0],h=t.Event("slide.bs.carousel",{relatedTarget:d,direction:o});if(this.$element.trigger(h),!h.isDefaultPrevented()){if(this.sliding=!0,r&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var c=t(this.$indicators.children()[this.getItemIndex(s)]);c&&c.addClass("active")}var p=t.Event("slid.bs.carousel",{relatedTarget:d,direction:o});return t.support.transition&&this.$element.hasClass("slide")?(s.addClass(e),s[0].offsetWidth,a.addClass(o),s.addClass(o),a.one("bsTransitionEnd",function(){s.removeClass([e,o].join(" ")).addClass("active"),a.removeClass(["active",o].join(" ")),l.sliding=!1,setTimeout(function(){l.$element.trigger(p)},0)}).emulateTransitionEnd(i.TRANSITION_DURATION)):(a.removeClass("active"),s.addClass("active"),this.sliding=!1,this.$element.trigger(p)),r&&this.cycle(),this}};var n=t.fn.carousel;t.fn.carousel=e,t.fn.carousel.Constructor=i,t.fn.carousel.noConflict=function(){return t.fn.carousel=n,this};var a=function(i){var n,a=t(this),s=t(a.attr("data-target")||(n=a.attr("href"))&&n.replace(/.*(?=#[^\s]+$)/,""));if(s.hasClass("carousel")){var r=t.extend({},s.data(),a.data()),o=a.attr("data-slide-to");o&&(r.interval=!1),e.call(s,r),o&&s.data("bs.carousel").to(o),i.preventDefault()}};t(document).on("click.bs.carousel.data-api","[data-slide]",a).on("click.bs.carousel.data-api","[data-slide-to]",a),t(window).on("load",function(){t('[data-ride="carousel"]').each(function(){var i=t(this);e.call(i,i.data())})})}(jQuery),+function(t){"use strict";function e(e){return this.each(function(){var n=t(this),a=n.data("bs.tab");a||n.data("bs.tab",a=new i(this)),"string"==typeof e&&a[e]()})}var i=function(e){this.element=t(e)};i.VERSION="3.3.6",i.TRANSITION_DURATION=150,i.prototype.show=function(){var e=this.element,i=e.closest("ul:not(.dropdown-menu)"),n=e.data("target");if(n||(n=e.attr("href"),n=n&&n.replace(/.*(?=#[^\s]*$)/,"")),!e.parent("li").hasClass("active")){var a=i.find(".active:last a"),s=t.Event("hide.bs.tab",{relatedTarget:e[0]}),r=t.Event("show.bs.tab",{relatedTarget:a[0]});if(a.trigger(s),e.trigger(r),!r.isDefaultPrevented()&&!s.isDefaultPrevented()){var o=t(n);this.activate(e.closest("li"),i),this.activate(o,o.parent(),function(){a.trigger({type:"hidden.bs.tab",relatedTarget:e[0]}),e.trigger({type:"shown.bs.tab",relatedTarget:a[0]})})}}},i.prototype.activate=function(e,n,a){function s(){r.removeClass("active").find("> .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),e.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),o?(e[0].offsetWidth,e.addClass("in")):e.removeClass("fade"),e.parent(".dropdown-menu").length&&e.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),a&&a()}var r=n.find("> .active"),o=a&&t.support.transition&&(r.length&&r.hasClass("fade")||!!n.find("> .fade").length);r.length&&o?r.one("bsTransitionEnd",s).emulateTransitionEnd(i.TRANSITION_DURATION):s(),r.removeClass("in")};var n=t.fn.tab;t.fn.tab=e,t.fn.tab.Constructor=i,t.fn.tab.noConflict=function(){return t.fn.tab=n,this};var a=function(i){i.preventDefault(),e.call(t(this),"show")};t(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',a).on("click.bs.tab.data-api",'[data-toggle="pill"]',a)}(jQuery),+function(t){"use strict";function e(e){var i,n=e.attr("data-target")||(i=e.attr("href"))&&i.replace(/.*(?=#[^\s]+$)/,"");return t(n)}function i(e){return this.each(function(){var i=t(this),a=i.data("bs.collapse"),s=t.extend({},n.DEFAULTS,i.data(),"object"==typeof e&&e);!a&&s.toggle&&/show|hide/.test(e)&&(s.toggle=!1),a||i.data("bs.collapse",a=new n(this,s)),"string"==typeof e&&a[e]()})}var n=function(e,i){this.$element=t(e),this.options=t.extend({},n.DEFAULTS,i),this.$trigger=t('[data-toggle="collapse"][href="#'+e.id+'"],[data-toggle="collapse"][data-target="#'+e.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};n.VERSION="3.3.6",n.TRANSITION_DURATION=350,n.DEFAULTS={toggle:!0},n.prototype.dimension=function(){var t=this.$element.hasClass("width");return t?"width":"height"},n.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var e,a=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(a&&a.length&&(e=a.data("bs.collapse"),e&&e.transitioning))){var s=t.Event("show.bs.collapse");if(this.$element.trigger(s),!s.isDefaultPrevented()){a&&a.length&&(i.call(a,"hide"),e||a.data("bs.collapse",null));var r=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[r](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var o=function(){this.$element.removeClass("collapsing").addClass("collapse in")[r](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!t.support.transition)return o.call(this);var l=t.camelCase(["scroll",r].join("-"));this.$element.one("bsTransitionEnd",t.proxy(o,this)).emulateTransitionEnd(n.TRANSITION_DURATION)[r](this.$element[0][l])}}}},n.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var e=t.Event("hide.bs.collapse");if(this.$element.trigger(e),!e.isDefaultPrevented()){var i=this.dimension();this.$element[i](this.$element[i]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var a=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return t.support.transition?void this.$element[i](0).one("bsTransitionEnd",t.proxy(a,this)).emulateTransitionEnd(n.TRANSITION_DURATION):a.call(this)}}},n.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},n.prototype.getParent=function(){return t(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(t.proxy(function(i,n){var a=t(n);this.addAriaAndCollapsedClass(e(a),a)},this)).end()},n.prototype.addAriaAndCollapsedClass=function(t,e){var i=t.hasClass("in");t.attr("aria-expanded",i),e.toggleClass("collapsed",!i).attr("aria-expanded",i)};var a=t.fn.collapse;t.fn.collapse=i,t.fn.collapse.Constructor=n,t.fn.collapse.noConflict=function(){return t.fn.collapse=a,this},t(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(n){var a=t(this);a.attr("data-target")||n.preventDefault();var s=e(a),r=s.data("bs.collapse"),o=r?"toggle":a.data();i.call(s,o)})}(jQuery),+function(t){"use strict";function e(){var t=document.createElement("bootstrap"),e={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var i in e)if(void 0!==t.style[i])return{end:e[i]};return!1}t.fn.emulateTransitionEnd=function(e){var i=!1,n=this;t(this).one("bsTransitionEnd",function(){i=!0});var a=function(){i||t(n).trigger(t.support.transition.end)};return setTimeout(a,e),this},t(function(){t.support.transition=e(),t.support.transition&&(t.event.special.bsTransitionEnd={bindType:t.support.transition.end,delegateType:t.support.transition.end,handle:function(e){return t(e.target).is(this)?e.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery);

 

А также для чего нужен скрипт svgxuse.min.js? Он есть в двух стандартных шаблонах.

Изменено 5 июня 2016 пользователем radrigo

[germanydletest 455]

36 минут назад, radrigo сказал:

 

А также для чего нужен скрипт svgxuse.min.js?

Для поддержки внешних ссылок в элементах <use> при использовании svg

43 минуты назад, radrigo сказал:

 

Подскажите ещё, какую функцию выполняет огромный кусок кода в начале файла lib.js, во всех стандартных шаблонах он немного отличается.

Подключаются все нужные для Bootstrap js функции и проверяется какая версия jQuery подключена.

[radrigo 180]

Спасибо=)

Только сейчас познакомился с Bootstrap, пол дня колесил в интернете читая различные статьи и пытаясь разобраться. Оказалась очень удобная и простая в использовании вещь.

[alex32 942]

24 минуты назад, radrigo сказал:

Оказалась очень удобная и простая в использовании вещь.

Это офигенная вещь, если ей правильно пользоваться. Если сразу компилировать все, как нужно, то работы и ненужного кода сокращается чуть ли не на треть, а то и наполовину.