dominus77/yii2-svg-widget

The lightweight library for manipulating and animating SVG for Yii2

Yii2 SVG Widget

The lightweight library for manipulating and animating SVG for Yii2., _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

php composer.phar require --prefer-dist dominus77/yii2-svg-widget "*"

or add, _(*4)

"dominus77/yii2-svg-widget": "*"

to the require section of your composer.json file., _(*5)

Usage

Once the extension is installed, simply use it in your code by:, _(*6)

<div id="drawing"></div>
<?php \dominus77\svg\SvgWidget::widget([
    'elementId' => 'drawing',
    'clientScript' => new \yii\web\JsExpression("
        draw.rect(100, 100).move(100, 50).fill('#f06');
    "),
]); ?>

Example:

Get demo data, _(*7)

<?php
$fileName = 'russia'; // russia or world
$file = Yii::getAlias('@dominus77/svg/example') . "/" . $fileName . ".json";
$data = file_get_contents($file);
?>

Render map, _(*8)

 'svg_map_russia',
    'clientScript' => new \yii\web\JsExpression("
        var data = {$data};
        var mapDraw = draw.size(1000, 550);
        // draw individual data
        for(var i = 0, il = data.length; i 

Render interactive map, _(*9)

 'svg_interactive_map_russia',
    'panZoom' => true, // on svg.panzoom.js plugin
    'clientScript' => new \yii\web\JsExpression("
        var data = {$data};
        var info = document.getElementById('info');

        // color region
        var colorOut = '#fff';
        var colorOver = '#ccc';

        // create draw
        var mapDraw = draw.size(500, 300).viewbox(0, 0, 1000, 550);

        // svg.panzoom.js plugin
        mapDraw.panZoom({zoomMin: 0.5, zoomMax: 20});
        mapDraw.zoom(0.5)
            .animate()
            .zoom(2, {x:50, y:280});

        // draw individual data
        for(var i = 0, il = data.length; i 

More Information

Please, check the SVG.js, _(*10)

License

The BSD License (BSD). Please see License File for more information., _(*11)