0

我正在开发一个 SVG UI 元素库，并计划使用 knockout.js。这是一个非常基本的页面，可以在没有 knockout.js 的情况下满足我的需求，它在 Chrome、FF、Opera 中运行良好。它画了一根管子：

<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>

现在到 knockout.js 模板。对于模板化控件的每个实例，我都需要唯一的 id，以便正确引用对应的渐变，并且不同的管道元素不共享渐变。在这篇文章的帮助下，我制作了以下 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>

它在 Chrome 中运行良好 - 显示红色管道。FF 和 Opera 一直显示黑色矩形，这意味着 SVG 对象没有拾取渐变。我检查了 FF 日志输出，它看起来非常好：

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

可以看到，渐变的 id 被生成并用于 rect 样式的 fill 属性。但是浏览器在显示矩形时不使用这种渐变。

这里有什么问题？任何解决方法？谢谢！

4

1 回答 1

0

我发现如果我对 svg 节点属性使用本机 KO 绑定，最好使用“attr”绑定。确实它似乎解决了你的问题：http: //jsfiddle.net/antishok/UHnA8/1/

（我知道 'css' 绑定不起作用，因为 svg 元素的 'class' 属性不是一个简单的字符串。不知道为什么 'style' 也不起作用，但至少 attr 似乎总是有效)

于 2012-09-28T05:19:07.357 回答