Question

我在玩SVG。我有一个复选框。如果选中它，我希望文本路径与其上的文本一起使用。如果未选中该复选框，我只想显示没有文本路径的文本。

问题是如果应该有一个textpath，那么data-bind属性应该在text元素上：

<text font-size="46" fill="red" font-family="Verdana" data-bind="text: customTextValue">

</text>

而在另一种情况下：

  <text font-size="46" fill="red" font-family="Verdana">

         <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">
         </textPath>
     </text>

HTML：

<svg id="resultArea" xmlns="http://www.w3.org/2000/svg">

     <path id="wavyPath1"
     fill="none" stroke="green" stroke-width="5"
     d="M 50 250
        C 150 150 250 50 350 150
        C 450 250 550 350 650 250
        C 750 150 850 150 850 150" />

     <text font-size="46" fill="red" font-family="Verdana"> 
         <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">>
         </textPath>
     </text>
</svg>

使用Javascript：

var MyViewModel = function() {
  this.customTextValue = ko.observable('test');
  this.useTextPath = ko.observable(false);

}

ko.applyBindings(new MyViewModel());

JsFiddle：http://jsfiddle.net/2Qnv7/128/

这里可以做些什么？

Answer 1

复选框的绑定为checked，而不是value。第一行应该是：

<input type="checkbox" data-bind="checked: useTextPath">

使用虚拟元素if。虚拟元素不会添加DOM，if会在虚假标记之间从DOM中删除所有内容。

<!-- ko if: useTextPath-->
  <text font-size="46" fill="red" font-family="Verdana">
    <textPath xlink:href="#wavyPath1" data-bind="text: customTextValue">
    </textPath>
  </text>
<!-- /ko -->
<!-- ko if: !useTextPath()-->
  <text font-size="46" fill="red" font-family="Verdana" 
   data-bind="text: customTextValue" x="250" y="150">
  </text>
<!-- /ko -->

JsFiddle：http://jsfiddle.net/2Qnv7/129/

Knockout：仅在选中复选框时添加textpath

1 个答案: