SVG制箱,VUE渲染扩展数量

SVG绘制平面箱，非3D绘制来保证能扩展数量。

立方体绘制需要设计6个面，此处为3面互相连接

HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blue-cube"
     viewBox="68 30 180 220">
    <defs>
        <g id="cube" style="fill-opacity: .9;stroke-miterlimit: 0;">
            <rect width="21" height="24" fill="#fff" stroke="#0079ad"
                  transform="skewY(30)" />
            <rect width="21" height="24" fill="#fff" stroke="#0079ad"
                  transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" fill="#fff" stroke="#0079ad"
                  transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <defs>
        <g id="exceptionCube" style="fill-opacity: .9;stroke-miterlimit: 0;">
            <rect width="21" height="24" :fill="color" stroke="#0079ad"
                  transform="skewY(30)" />
            <rect width="21" height="24" :fill="color" stroke="#0079ad"
                  transform="skewY(-30) translate(21 24.3)" />
            <rect width="21" height="21" :fill="color" stroke="#0079ad"
                  transform="scale(1.41,.81) rotate(45) translate(0 -21)" />
        </g>
    </defs>
    <use v-for="box in boxes" xlink:href="#cube" :x="box.x" :y="box.y" />
</svg>

配合VUE，设定两个箱子第二个箱子填充颜色来提供标记
v-for循环渲染

VUE：

new Vue({
       el:"#container",
       data:{
       		boxes:[],
       		color:"red",
    	},
    	mounted() {
    		//初始化渲染
    		this._renderingBox(2,4);
		},
		methods:{
			/*渲染料箱格口
			* row ：行数  column：列数 x,y起始横纵坐标,width,height箱子与扩展大小，与svg内设定相关
			*/
                _renderingBox(row, column, x=79, y=72, width=21, height=12){
                    let boxes = [];
                    for (let i=0;i<column;i++){
                        for (let j=row-1;j>=0;j--){
                            boxes.push({x:((i+j)*width)+x,y:(y+(i*height))-(j*height)});
                        }
                    }
                    this.boxes = boxes;
                },
		},
});

效果

更换行列试试：

修改原代码增加一个属性来标记颜色


效果：