SVG 使用4点星调整视框（viewbox）

SVG 4 point star adjusting the viewBox

svg，viewbox

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2366
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var svg = document.querySelector('.adjustable'),
    range = document.getElementById('vb'),
    pt = document.getElementById('pt'),
    vb_code = document.querySelectorAll('[id*=vb]'),
    vb_svg = document.querySelectorAll('.label'),
    vb_svg_in = [],
    pt_code = document.querySelectorAll('[id*=p]'),
    pt_svg = document.querySelectorAll('use[id*=v]'),
    topleft = document.querySelector('#topleft use');

for (var i = 0; i < 4; i++) {
    vb_svg_in.push(vb_svg[i].querySelector('text'));
}

var hl = function(e) {
    var t = e.target,
        ts, idx;

if (t.id) {
        if (t.id.indexOf('vb') === 0) {
            idx = t.id[2] * 1;
            ts = vb_svg[idx];

if (idx < 2 && topleft.classList) {
                topleft.classList.toggle('hl');
            }
        }
        if (t.id[0] === 'p') {
            idx = t.id[1] * 1;
            ts = pt_svg[idx];
        }
        if (t.tagName.toLowerCase() === 'use' &&
            t.id.indexOf('v') === 0) {
            idx = t.id[1] * 1;
            ts = pt_code[idx];
        }
    }

if (t.parentNode && t.parentNode.id &&
        t.parentNode.id[0] === 'l') {
        t = t.parentNode;
        idx = t.id[1] * 1;
        ts = vb_code[idx];

if (idx < 2 && topleft.classList) {
            topleft.classList.toggle('hl');
        }
    }

if (t && ts) {
        if (!t.classList) {
            if (t.className.baseVal.indexOf('hl') === -1) {
                t.className.baseVal =
                    t.className.animVal =
                    t.className.baseVal.trim();
                t.className.baseVal += ' hl';
                t.className.animVal += ' hl';
            } else {
                t.className.baseVal =
                    t.className.animVal =
                    t.className.baseVal.replace('hl', '');

}
        } else {
            t.classList.toggle('hl');
        }

if (!ts.classList) {
            if (ts.className.baseVal.indexOf('hl') === -1) {
                ts.className.baseVal =
                    ts.className.animVal =
                    ts.className.baseVal.trim();
                ts.className.baseVal += ' hl';
                ts.className.animVal += ' hl';
            } else {
                ts.className.baseVal =
                    ts.className.animVal =
                    ts.className.baseVal.replace('hl', '');

}
        } else {
            ts.classList.toggle('hl');
        }
    }
};

addEventListener('mouseover', hl, false);
addEventListener('mouseout', hl, false);

var update = function() {
    var d = range.value * 1,
        val = [~~(-d / 2), ~~(-d / 2), d, d];

vb_code[0].textContent =
        vb_code[1].textContent =
        vb_svg_in[0].textContent =
        vb_svg_in[1].textContent = ~~(-d / 2);
    vb_code[2].textContent =
        vb_code[3].textContent =
        vb_svg_in[2].textContent =
        vb_svg_in[3].textContent = d;

pt.setAttribute('r', d * .01);

svg.setAttribute('viewBox', val.join(' '));
};

range.addEventListener('input', update, false);
range.addEventListener('change', update, false);

编译

CSS

$code-bg: #222;
$code-c: #ddd;

$vb-hl: crimson;

$cs-c: #777;
$guides-c: #777;
$meas-c: #222;
$poly-c: #000;
$poly-bg: #d49b00;

pre {
	padding: .5em;
	background: $code-bg;
	color: $code-c;
	tab-size: 4;
	
	[class*=values] span {
		display: inline-block;
		margin: .125em 0;
		padding: .25em .125em;
		border-radius: 3px;
		vertical-align: middle;
		transition: .35s;
		cursor: pointer;
	}
}

.values {
	&--vb {
		.hl { background: $vb-hl; }
	}
	
	&--pt {
		@for $i from 0 to 8 {
			$c: hsl($i*45, 100%, 50%);
			
			span:nth-of-type(#{$i + 1}) {
				color: lighten($c, 25%);
			}
			
			.hl:nth-of-type(#{$i + 1}) {
				background: lighten($c, 25%);
				color: #000;
			}
			
			@at-root {
				use[id*='v']:nth-of-type(#{$i + 1}) {
					fill: $c;
					stroke: rgba(lighten($c, 10%), .16);
					opacity: .65;
				}
				use.hl[id*='v']:nth-of-type(#{$i + 1}) {
					fill: darken($c, 45%);
					stroke: rgba(lighten($c, 10%), .64);
					opacity: .99;
				}
			}
		}
	}
}

.container {
	position: relative;
	margin: 0 auto;
	min-width: 20em; min-height: 20em;
	width: 80vmin; height: 80vmin;
}

svg {
	overflow: hidden; // IE
	position: absolute;
}

.adjustable {
	$r: 25/32;
	
	top: 50%; left: 50%;
	width: $r*100%; height: $r*100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

line, path {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

circle {
	vector-effect: non-scaling-stroke;
}

.cs path {
	fill: $cs-c;
	stroke: $cs-c;
}

.guides {
	fill: transparent;
	stroke: $guides-c;
	stroke-dasharray: 5;
}

.meas path {
	fill: $meas-c;
	stroke: $meas-c;
}

[id='topleft'] .hl {
	fill: $vb-hl;
}

text {
	font: 700 2em monospace;
	text-anchor: middle;
}

.label {
	use { fill: rgba($vb-hl, .01); }
	text { cursor: pointer; }
}

.hl {
	use { fill: $vb-hl; }
	text { fill: $code-c; }
}

polygon {
	&:nth-of-type(1) {
		stroke: rgba($poly-bg, .32);
		stroke-width: 20;
		stroke-miterlimit: 32;
	}

&:nth-of-type(2) {
		stroke: $poly-c;
		stroke-dasharray: 3;
		vector-effect: non-scaling-stroke;
	}
	
	fill: transparent;
}

[id='vertices'] { pointer-events: auto; }

use[id*='v'] {
	stroke-width: 20;
	cursor: pointer;
}

/* controls */

$theme-hl: #e18728;

$ctrl-bg: #262626;
$ctrl-ll: #aaa;
$ctrl-hl: $theme-hl;

$track-w: 13em;
$track-h: .25em;

$thumb-d: 1.25em;

@mixin track() {
	width: $track-w; height: $track-h;
	background: $ctrl-ll;
}

@mixin fill() {
	background: $ctrl-hl;
}

@mixin thumb() {
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: $ctrl-hl;
}

form {
	position: absolute;
	bottom: .25em; right: .25em;
	margin: .25em;
	padding: .5em;
	background: $ctrl-bg;
	color: $ctrl-ll;
	font: 1em/1.375em trebuchet ms, sans serif;
}

input[type='range'] {
	&, 
	&::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb {
		-webkit-appearance: none;
	}
	
	display: block;
	margin: 1em auto 0;
	padding: 0;
	width: $track-w; height: 2em;
	background: none;
	font-size: 1em;
	cursor: pointer;
	
	&::-webkit-slider-runnable-track {
		@include track();
	}
	&::-moz-range-track {
		@include track();
	}
	&::-ms-track {
		border: none;
		@include track();
		color: transparent;
	}
	
	&::-moz-range-progress {
		height: $track-h;
		@include fill();
	}
	&::-ms-fill-lower {
		@include fill();
	}
	
	&::-webkit-slider-thumb {
		margin-top: ($track-h - $thumb-d)/2;
		@include thumb();
	}
	&::-moz-range-thumb {
		@include thumb();
	}
	&::-ms-thumb {
		@include thumb();
	}
	
	&::-ms-tooltip { display: none; }
	
	+ label {
		display: block;
		text-align: center;
	}
		
	&:focus { outline: none; }
}

HTML

<pre>&lt;svg viewBox='<span class='values--vb'><span id='vb0' data-inf='SVG canvas top left corner x coordinate'>-250</span> <span id='vb1' data-inf='SVG canvas top left corner y coordinate'>-250</span> <span id='vb2' data-inf='SVG canvas width'>500</span> <span id='vb3' data-inf='SVG canvas width'>500</span></span>'&gt;
	&lt;polygon points='<span class='values--pt'><span id='p0'>250,0</span> <span id='p1'>20,20</span> <span id='p2'>0,250</span> <span id='p3'>-20,20</span> <span id='p4'>-250,0</span> <span id='p5'>-20,-20</span> <span id='p6'>0,-250</span> <span id='p7'>20,-20</span></span>'/&gt;
&lt;/svg&gt;</pre>
<svg viewBox='-160 -160 120 120'>
	<polygon points='250,0 20,20 0,250 -20,20 -250,0 -20,-20 0,-250 20,-20'/>
</svg>
<div class='container'>
    <svg viewBox='-320 -320 640 640'>
        <defs>
            <circle id='pt' r='5' />
            <rect id='lt' x='-32' y='-17' width='64' height='34' rx='5' ry='5' />
        </defs>

<form class='controls'>
    <input id='vb' type='range' min='320' max='640' value='500' step='2' />
    <label for='vb'><code>viewBox width/ height</code>
    </label>
</form>

SVG 4 point star adjusting the viewBox

svg，viewbox

编辑器支持Emmet

快捷键

SVG 4 point star adjusting the viewBox

svg，viewbox

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：