Home/ Questions/Q 8594643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T00:14:45+00:00

I am working on a library of SVG UI elements and planning to use

  • 0

I am working on a library of SVG UI elements and planning to use knockout.js. Here is a very basic page that does what I need without knockout.js, it works fine in Chrome, FF, Opera. It draws a piece of pipe:

<html>
<body>
    <div width="100px" height="100px">
        <svg width='100px' height='100px'>
          <linearGradient id="gradId" y1='-20%' x1='0%' y2='100%' x2='0%' gradientUnits='objectBoundingBox'>
            <stop  offset='-20%' style="stop-color: #303030"/>
            <stop  offset='40%' style="stop-color: #D0D0D0"/>
            <stop  offset='100%' style="stop-color: #303030"/>
          </linearGradient>
          <rect id="myRect" x='0%' y='30%' width='100%' height='40%' />
        </svg>
    </div>
    <script type="text/javascript">
        document.getElementById("myRect").style.fill = "url(#gradId)";
        console.log(document.getElementById("myRect").style.fill);
    </script>
</body>
</html>

Now to the knockout.js templates. For every instance of the templated control, I will need unique id, so correspondent gradients are referenced properly and different pipe elements do not share gradients. With some help from this post, I crafted the following html:

<html>
<head>
    <script type="text/javascript" src="js/knockout-2.1.0.debug.js "></script>
    <script type="text/javascript">
        // knockout code inspired by https://stackoverflow.com/questions/9233176/unique-ids-in-knockout-js-templates
        ko.bindingHandlers.uniqueId = {
            init: function (element, valueAccessor) {
                // Generate new element id
                element.id = ko.bindingHandlers.uniqueId.prefix + valueAccessor() + ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter);
                console.log("Element id:" + element.id);
            },
            prefix: "autoId_",
            counter: 0
        };

        ko.bindingHandlers.uniqueStyleFill = {
            init: function (element, valueAccessor) {
                // Use recently generated element id in the style.fill value
                var value = ko.bindingHandlers.uniqueId.prefix + valueAccessor() + ko.bindingHandlers.uniqueId.prefix + ko.bindingHandlers.uniqueId.counter.toString();
                element.style.fill = "url(#" + value + ")";
                console.log("Binding:" + element.style.fill);
            }
        }; 
    </script>
</head>
<body>
<!-- Define ko template plumbing-horizontal-pipe that uses bodyColor and bodyColorLight attributes of the bound object --> 
    <script type="text/html" id="plumbing-horizontal-pipe">
        <svg width='100px' height='100px'>
          <linearGradient data-bind="uniqueId: 'horPipeGrad_'" y1='-20%' x1='0%' y2='100%' x2='0%' gradientUnits='objectBoundingBox'>
            <stop  offset='-20%' data-bind="style: {'stop-color': bodyColor()}"/>
            <stop  offset='40%' data-bind="style: {'stop-color': bodyColorLight()}"/>
            <stop  offset='100%'  data-bind="style: {'stop-color': bodyColor()}"/>
          </linearGradient>
          <rect x='0%' y='30%' width='100%' height='40%' data-bind="uniqueStyleFill: 'horPipeGrad_'"/>
        </svg>
    </script>
    <div width="100px" height="100px">
    <!-- Load ko template defined above, bind 'pipe' -->
        <svg width="100" height="110" data-bind="template: { name: 'plumbing-horizontal-pipe', data: pipe }" />
    </div>
    <!-- ko view model with one item 'pipe' -->
    <script type="text/javascript">
        function MyViewModel() {
            this.pipe = { bodyColor: ko.observable("#FF0000"), bodyColorLight: ko.observable("#FFA0A0") };
        }
        var g_vm = new MyViewModel();
        // This should make the browser display a red pipe. Works in Chrome, doesn't work in FF and Opera.
        ko.applyBindings(g_vm);
    </script>
</body>
</html>

It works fine in Chrome – the red pipe is displayed. FF and Opera keep displaying black rectangle, which means the SVG object doesn’t pick up the gradient. I checked FF log output, it looks totally fine:

[21:30:08.606] Element id:autoId_horPipeGrad_autoId_1
[21:30:08.610] Binding:url("#autoId_horPipeGrad_autoId_1") none

As one can see, the id for the gradient is generated and used in the fill attribute for the rect style. But the browser doesn’t use this gradient when displaying the rectangle.

What’s wrong here? Any workarounds?
Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve found that if I’m using native KO bindings for svg node properties, it’s best to work with the ‘attr’ binding.
    And indeed it seems to fix your problem: http://jsfiddle.net/antishok/UHnA8/1/

    (I know that the ‘css’ binding doesn’t work good because the ‘class’ property for svg elements isn’t a simple string. Not sure why ‘style’ doesn’t work either, but at least attr seems to always work)

    • 0