ブラウザでSVGを表示するSIEの開発 (SIE - to display SVG on legacy browsers)
| リビジョン | d83dcf93c96f831db38136bd298727e3fb73272f (tree) |
|---|---|
| 日時 | 2016-06-21 20:57:51 |
| 作者 | dhrname <dhrname@user...> |
| コミッター | dhrname |
Modify the
| @@ -1580,16 +1580,10 @@ base("$calcMode").up("$attribute").mix( { | ||
| 1580 | 1580 | *小数点以下の桁数を決めるdegitsプロパティの値も大きくしておく*/ |
| 1581 | 1581 | degits: 15, |
| 1582 | 1582 | |
| 1583 | - /*$animateElementオブジェクトのtocallメソッドをオーバライド*/ | |
| 1584 | - tocall: function (advance) { | |
| 1585 | - if (this.numberOfList < 0) { | |
| 1586 | - throw new Error("Number of The List Error"); | |
| 1587 | - } | |
| 1588 | - var playList = this.element.__transformList, | |
| 1589 | - currentItem = playList[this.numberOfList]; | |
| 1590 | - currentItem.value = this.type+ "(" +this.$animateElement.tocall.call(this, advance)+ ")"; | |
| 1591 | - currentItem.isPlaying = true; | |
| 1592 | - var s = this.defaultValue || ""; | |
| 1583 | + /*tocallメソッド(後述の$motionElementオブジェクトも含む)で使うメソッド | |
| 1584 | + * __transformListの値を結合して、文字列として返す*/ | |
| 1585 | + joinList: function(s) { | |
| 1586 | + var playList = this.element.__transformList; | |
| 1593 | 1587 | for (var i=0;i<playList.length;++i) { |
| 1594 | 1588 | var item = playList[i], |
| 1595 | 1589 | value = item.value; |
| @@ -1601,7 +1595,19 @@ base("$calcMode").up("$attribute").mix( { | ||
| 1601 | 1595 | s = value; |
| 1602 | 1596 | } |
| 1603 | 1597 | } |
| 1604 | - return s; | |
| 1598 | + return s.trim(); | |
| 1599 | + }, | |
| 1600 | + | |
| 1601 | + /*$animateElementオブジェクトのtocallメソッドをオーバライド*/ | |
| 1602 | + tocall: function (advance) { | |
| 1603 | + if (this.numberOfList < 0) { | |
| 1604 | + throw new Error("Number of The List Error"); | |
| 1605 | + } | |
| 1606 | + var currentItem = this.element.__transformList[this.numberOfList]; | |
| 1607 | + currentItem.value = this.type+ "(" +this.$animateElement.tocall.call(this, advance)+ ")"; | |
| 1608 | + currentItem.isPlaying = true; | |
| 1609 | + currentItem.isSum = this.isSum; | |
| 1610 | + return this.joinList(this.defaultValue || ""); | |
| 1605 | 1611 | }, |
| 1606 | 1612 | |
| 1607 | 1613 | /*後の_setFrameメソッドで使うダミー*/ |
| @@ -1686,6 +1692,10 @@ base("$calcMode").up("$attribute").mix( { | ||
| 1686 | 1692 | } |
| 1687 | 1693 | } ) |
| 1688 | 1694 | .up("$motionElement") |
| 1695 | + .mix( function() { | |
| 1696 | + /*setRFrameメソッドを再定義*/ | |
| 1697 | + this._setFrame = this.$animateElement._setFrame; | |
| 1698 | + }) | |
| 1689 | 1699 | .mix( { |
| 1690 | 1700 | numberOfList: -1, |
| 1691 | 1701 | mode: "paced", |
| @@ -1703,12 +1713,22 @@ base("$calcMode").up("$attribute").mix( { | ||
| 1703 | 1713 | |
| 1704 | 1714 | path: document.createElementNS("http://www.w3.org/2000/svg", "path"), |
| 1705 | 1715 | |
| 1706 | - /*_tocallメソッドを置き換えるためのメソッド | |
| 1716 | + /*tocallメソッドのオーバライド*/ | |
| 1717 | + tocall: function(advance) { | |
| 1718 | + /*モーションは仕様の関係上、かならず、CTMの一番初めに置かれ、前置積となる | |
| 1719 | + * なお、__transformListプロパティはtransform属性の値であり、CTMを表現する。 | |
| 1720 | + * 必ず、CTMの一番目に設定する*/ | |
| 1721 | + var s = "translate(" +this.$animateElement.tocall.call(this, advance)+ ") " | |
| 1722 | + + (this.defaultValue || ""); | |
| 1723 | + return this.joinList(s); | |
| 1724 | + }, | |
| 1725 | + | |
| 1726 | + /*$animateElement.tocallメソッドを置き換えるためのメソッド | |
| 1707 | 1727 | * mpath要素が指定されたときか、path属性のときにのみ使われる*/ |
| 1708 | 1728 | _tocallForPath: function(advance) { |
| 1709 | 1729 | /*全体の距離から、現在進めている距離を算出して、そこから、現在点を導き出す*/ |
| 1710 | 1730 | var point = this.path.getPointAtLength(advance * this.path.getTotalLength()); |
| 1711 | - return "translate(" +point.x+ "," +point.y+ ")"; | |
| 1731 | + return point.x+ "," +point.y; | |
| 1712 | 1732 | } |
| 1713 | 1733 | } ) |
| 1714 | 1734 | .on("init", function (ele) { |
| @@ -1717,18 +1737,24 @@ base("$calcMode").up("$attribute").mix( { | ||
| 1717 | 1737 | } |
| 1718 | 1738 | /*type属性で変更されないように($animateTransformElementのinitメソッドを参照のこと)*/ |
| 1719 | 1739 | this.type = "translate"; |
| 1740 | + /*isSumプロパティは常にtrueにしておく。animateTransform要素とは挙動が違うため | |
| 1741 | + * また、$aniamteTransformElementのtocallメソッド参照*/ | |
| 1742 | + this.isSum = true; | |
| 1720 | 1743 | this.mode = this.getAttr("mode", "paced"); |
| 1721 | 1744 | this.path = this.path.cloneNode(true); |
| 1722 | 1745 | var mpath = ele.getElementsByTagNameNS(this.path.namespaceURI, "mpath"); |
| 1746 | + var list = this.element.__transformList; | |
| 1747 | + /*$animateは後で、プロパティを書き換えるために使う。tocallメソッドも参照*/ | |
| 1748 | + var $animate = this.$animateElement; | |
| 1723 | 1749 | if (mpath.length) { |
| 1724 | 1750 | var p = ele.ownerDocument.getElementById( |
| 1725 | 1751 | mpath[0].getAttributeNS("http://www.w3.org/1999/xlink", "href").slice(1) |
| 1726 | 1752 | ); |
| 1727 | 1753 | p && this.path.setAttributeNS(null, "d", p.getAttributeNS(null, "d")); |
| 1728 | - this.tocall = this._tocallForPath; | |
| 1754 | + this.$animateElement = $animate.up().mix ( {tocall: this._tocallForPath} ); | |
| 1729 | 1755 | } else if (ele.hasAttributeNS(null, "path")) { |
| 1730 | 1756 | this.path.setAttributeNS(null, "d", ele.getAttributeNS(null, "path")); |
| 1731 | - this.tocall = this._tocallForPath; | |
| 1757 | + this.$animateElement = $animate.up().mix ( {tocall: this._tocallForPath} ); | |
| 1732 | 1758 | } |
| 1733 | 1759 | } ); |
| 1734 | 1760 |