Knockout Bug with SVGs

by Mohammed Ismail Ansari

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0rc.js"></script>

<p>The 'div' element is able to receive class 'high' however the SVG isn't.</p>

<div class="rectangle" data-bind="css: { 'high': niceOne }">
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g class="realRectangle">
        <circle class="circle" cx="100" cy="100" r="50"
            fill="gold"
            data-bind="css: { 'high': niceOne }" />
    </g>
</svg>

CSS

body
{
    background-color: #A0A0A0;
    font-family: 'Arial';
}

.rectangle
{
    width: 50px;
    height: 50px;
    background-color: Gold;
}

.high
{
    fill: red;
    background-color: red;
}

JavaScript

var Viewmodel = function() {
    var self = this;
    
    this.niceOne = ko.observable(true);
};

$(document).ready(function () {
    var myViewModel = new Viewmodel();
    ko.applyBindings(myViewModel);
});