SVG 旋转一个简单的路径

SVG:Rotate simple path

SVG

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

第三方库
作品简介 4111
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var path = document.querySelector("#path"),
    target = document.querySelector(".target"),
    dd = document.querySelector("#d"),
    newColor = document.querySelector(".newColor"),
    edges = document.querySelector("#edges"),
    dasharray = document.querySelector("#dasharray"),
    svgNS = document.querySelector("svg").namespaceURI,
    controls = document.querySelector('.controls'),
    toggle = false;
var values = [{
    parentprop: 'transform',
    prop: 'rotate',
    default: '107',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 360,
    step: 1
}, {
    parentprop: 'transform',
    prop: 'rotateX',
    default: '95',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 360,
    step: 1
}, {
    parentprop: 'transform',
    prop: 'rotateY',
    default: '147',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 360,
    step: 1
}, {
    parentprop: 'transform',
    prop: 'rotateZ',
    default: '108',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 360,
    step: 1
}, {
    parentprop: 'transform',
    prop: 'scale',
    default: '.5',
    template: '%prop%(%value%)',
    min: "0",
    max: "6",
    step: ".1"
}, {
    parentprop: 'transform',
    prop: 'skewX',
    default: '0',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 360,
    step: 1
}, {
    parentprop: 'transform',
    prop: 'skewY',
    default: '0',
    template: '%prop%(%value%deg)',
    min: 0,
    max: 180,
    step: 1
}];

/*
{
	prop:
	{
		parentProp,
		value,
		target
	}
}
*/
var targetProps = {};
values.forEach(function(controle) {
    addControl(controle);
});

function propChanged(e) {
    var targ = (e.target) ? e.target : e,
        prop = targ.getAttribute("prop"),
        defValue = targ.getAttribute("default"),
        parentProp = targ.getAttribute("parentprop"),
        template = targ.getAttribute("template"),
        propTarget = targ.getAttribute("target"),
        lbl = document.querySelector("." + prop + " + label");
    var attValue = parseTemplate(template, prop, targ.value);
    lbl.innerText = prop + " " + targ.value;

targetProps[prop] = {
        parentProp: parentProp,
        value: attValue,
        target: (propTarget) ? propTarget : "#no1",
        defValue: defValue
    }
    updateProperties(target);
}

function reset() {
    updateProperties(target, toggle);
    toggle = !toggle;
}

for (prop in props) {
        var propTarget = document.querySelector(props[prop].target);
        draw(props[prop].value)
            //propTarget.style[prop]=props[prop].value;
    }
}

function parseTemplate(temp, prop, value) {
    var res = temp.replace(/%prop%/ig, prop),
        res = res.replace(/%value%/ig, value);
    return res;
}

function getElement(tagName, attributes) {
    var ele = document.createElement(tagName);
    for (attr in attributes) {
        ele.setAttribute(attr, attributes[attr])
    };
    return ele;
}

function draw(style) {
    style = style || "";
    var edg = edges.value;
    var rotate = 360 / edg;
    target.innerHTML = "";
    for (var i = 0; i < edg; i++) {
        var use = document.createElementNS(svgNS, 'use');
        use.style.transform = style + "rotate(" + (i * rotate) + "deg) rotateX(" + (i * rotate) + "deg)";
        use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#path");
        target.appendChild(use);
    }
}

edges.oninput = function(e) {
    draw();
    updateProperties(target, false)
}
newColor.onclick = setColor

function setColor() {
    path.setAttribute("stroke", getCol());
    draw();
    updateProperties(target, false)
}

function getCol() {
    var r = parseInt(Math.random() * 250 + 5),
        g = parseInt(Math.random() * 250 + 5),
        b = parseInt(Math.random() * 250 + 5),
        a = Math.round((Math.random() * .5 + .5) * 100) / 100;
    return "rgba(" + r + "," + g + "," + b + "," + a + ")"
}

setColor();
updateProperties(target, toggle);

dd.value = path.getAttribute('d');
dd.oninput = function() {
    path.setAttribute('d', dd.value);
    draw();
}

dasharray.oninput = function() {
    path.style.strokeDasharray = dasharray.value;
    draw();
}

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700|Open+Sans:400,800);
html,
body {
    font-family: 'Open Sans', sans-serif;
    background: black;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
* {
    box-sizing: border-box;
    transform-style: preserve-3d;
}
h1,
h2 {
    color: white;
    font-weight: 300;
    position: absolute;
    left: .5em;
    z-index: 10;
    text-shadow: 2px 2px 0px rgba(220, 220, 220, 0.5), 2px 2px 0px rgba(0, 0, 0, 0.5);
}
h2 {
    top: 0;
    margin: 250px 0 0 350px;
    ;
}
.controls {
    transform: scale(.84);
    position: absolute;
    z-index: 1110;
    height: 10vh;
    top: 0;
    right: 0;
    width: 430px;
    padding-top: 20px;
}
.control + label {
    font-family: 'Inconsolata', monospace;
    color: white;
    position: absolute;
    margin-top: 12px;
}
/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

input {
    height: 40px;
}
input[type=range] {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    
    width: 64%;
    /* Specific width is required for Firefox. */
    
    background: transparent;
    /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    
    background: transparent;
    border-color: transparent;
    color: transparent;
}
/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -14px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
/* All the same stuff for IE */

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 70%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #aaa;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #367ebd;
}
input[type=range]::-moz-range-track {
    width: 70%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #aaa;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
input[type=range]::-ms-track {
    width: 70%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
    background: #aaa;
}
input[type=range]::-ms-fill-upper {
    background: #aaa;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
}
use {
    transform-origin: 300px 300px;
}
button {
    clear: both;
    width: 64%;
    margin-bottom: 5px;
    font-size: 20px;
    border-radius: 3px;
    color: black;
    background: #eee;
}
button:active {
    box-shadow: none;
    outline: none;
}
path {
    transition: all .4s;
}
.full {
    width: 100%;
    padding: 14px;
    font-family: Inconsolata, monospace;
    font-size: 15pt;
}

HTML

SVG:Rotate simple path

SVG

编辑器支持Emmet

快捷键

SVG:Rotate simple path

SVG

一款红色边框带边线旋转填充动画的SVG单选框

SVG 字符的旋转圆点背景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：