外部 SVG 文档可以包含 AngularJS ng-click 或 ng-model 指令吗？

Posted 2023-03-28

技术标签:

【中文标题】外部 SVG 文档可以包含 AngularJS ng-click 或 ng-model 指令吗？【英文标题】：Can an external SVG document contain an AngularJS ng-click or ng-model directive? 【发布时间】：2020-07-12 02:45:49 【问题描述】：

我正在创建一个触摸屏目录，并且正在使用 AngularJS 框架。

当单击 SVG 文档中的形状时，我希望在 html 文档中显示一些信息。

我正在使用object标签将svg文档嵌入到html文档中。

如果我在外部 SVG 文档中添加 ng-if 或 ng-model 指令，这会起作用吗？如果是这样，我是否需要在 SVG 文档中添加 ng-controller 指令？

示例：

HTML

<object ng-attr-data="image.svg" type="image/svg+xml"></object>    
<div ng-if="click">Hello</div>

SVG

<svg>
  <g id="Layer_2">
    <rect x="95.8" y="61.3" id="101" class="st2"   ng-model="click"/>
  </g>
</svg>

【问题讨论】：

为什么不直接使用svg？每个浏览器都支持它，应该更容易处理。我正在为具有多个楼层的建筑物创建平面图。我尝试将 svg 标记直接合并到 html 中，但事实证明这是有问题的。我认为 svg 代码的数量是真正的问题。平面图也将显示在触摸屏上，因此它们需要保持交互性你在创造全新的东西吗？如果是，你为什么使用 AngularJS 而不是 Angular？ 【参考方案1】：

为此，svg 代码必须由 AngularJS 编译，因此它可以解释像 ng-click 和 <svg>...</svg> 代码这样的指令

诀窍是创建一个自定义指令，使用 svg 图像文件作为指令的模板。

这是一个示例代码：

项目结构

|_ index.html
|_ module.js
|_ assets
   |_ ellipses.svg
   |_ tux-mono.svg

index.html

<!DOCTYPE html>

<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="module.js"></script>
  </head>
  <body ng-controller="MyController">
    <svg-component data-uid="ellipses-1" data-filename="assets/ellipses.svg"></svg-component>
    <svg-component data-uid="ellipses-2" data-filename="assets/ellipses.svg"></svg-component>
    <svg-component data-uid="tux" data-filename="assets/tux-mono.svg"></svg-component>

    <p ng-if="data.componentUid && data.objectName">
      <strong ng-bind="data.objectName"></strong> object was clicked in
      <strong ng-bind="data.componentUid"></strong> component
    </p>
  </body>
</html>

module.js

(function () 
    'use strict';

    angular.module('app', []);

    angular.
        module('app')
        .controller('MyController', ['$scope', '$rootScope', function ($scope, $rootScope) 
            $rootScope.$on('SVG_COMPONENT_ON_CLICK', function (event, data) 
                $scope.data = data;
            );
        ])
        .directive('svgComponent', ['$rootScope', function ($rootScope) 
            return 
                restrict: 'E',
                templateUrl: function (element, attrs) 
                    return attrs.filename;
                ,
                scope: ,
                link: link
            ;

            function link(scope, element, attrs) 
                scope.callback = function (objectName) 
                    $rootScope.$broadcast('SVG_COMPONENT_ON_CLICK', 
                        componentUid: attrs.uid,
                        objectName: objectName
                    );
                
            
        ]);
)();

ellipses.svg

<svg  >
  <ellipse ng-click="callback('Purple')" cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse ng-click="callback('Green')" cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse ng-click="callback('Yellow')" cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
  Sorry, your browser does not support inline SVG. 
</svg>

tux-mono.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 178 215" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 170.976562 169.433594 C 170.976562 169.433594 170.972656 169.429688 170.972656 169.425781 C 169.453125 167.714844 168.730469 164.539062 167.953125 161.15625 C 167.179688 157.777344 166.3125 154.132812 163.539062 151.769531 C 163.53125 151.765625 163.523438 151.761719 163.519531 151.753906 C 162.96875 151.273438 162.40625 150.871094 161.835938 150.53125 C 161.269531 150.195312 160.691406 149.917969 160.113281 149.703125 C 163.96875 138.261719 162.457031 126.871094 158.5625 116.578125 C 153.785156 103.941406 145.441406 92.933594 139.070312 85.40625 C 131.9375 76.40625 124.960938 67.867188 125.101562 55.253906 C 125.3125 36 127.21875 0.296875 93.335938 0.25 C 91.960938 0.246094 90.523438 0.304688 89.023438 0.425781 C 51.164062 3.472656 61.207031 43.472656 60.644531 56.863281 C 59.953125 66.660156 57.96875 74.378906 51.230469 83.953125 C 43.316406 93.363281 32.171875 108.597656 26.894531 124.453125 C 24.40625 131.9375 23.21875 139.566406 24.3125 146.785156 C 23.96875 147.09375 23.644531 147.414062 23.332031 147.746094 C 21.011719 150.226562 19.292969 153.230469 17.378906 155.253906 C 15.59375 157.039062 13.046875 157.71875 10.246094 158.71875 C 7.449219 159.726562 4.375 161.203125 2.511719 164.785156 C 2.511719 164.785156 2.511719 164.789062 2.507812 164.789062 C 2.503906 164.792969 2.503906 164.800781 2.496094 164.804688 C 1.621094 166.441406 1.335938 168.210938 1.335938 170.003906 C 1.335938 171.660156 1.578125 173.339844 1.828125 174.957031 C 2.34375 178.320312 2.863281 181.503906 2.171875 183.660156 C -0.0429688 189.71875 -0.328125 193.90625 1.234375 196.945312 C 2.796875 199.988281 6.011719 201.332031 9.640625 202.09375 C 16.90625 203.609375 26.746094 203.234375 34.496094 207.34375 L 35.164062 206.085938 L 34.503906 207.34375 C 42.804688 211.683594 51.21875 213.226562 57.933594 211.691406 C 62.800781 210.582031 66.753906 207.683594 68.78125 203.222656 C 74.03125 203.199219 79.796875 200.972656 89.023438 200.464844 C 95.289062 199.960938 103.109375 202.691406 112.109375 202.191406 C 112.34375 203.164062 112.683594 204.105469 113.148438 204.996094 C 113.152344 205.003906 113.15625 205.015625 113.164062 205.023438 C 116.648438 211.996094 123.128906 215.1875 130.039062 214.640625 C 136.953125 214.097656 144.304688 210.019531 150.25 202.949219 L 149.160156 202.03125 L 150.257812 202.9375 C 155.921875 196.066406 165.324219 193.21875 171.5625 189.460938 C 174.679688 187.578125 177.207031 185.226562 177.40625 181.804688 C 177.601562 178.386719 175.59375 174.558594 170.976562 169.433594 Z M 170.976562 169.433594 "/>
<path ng-click="callback('Left feet')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 174.558594 181.640625 C 174.441406 183.753906 172.914062 185.320312 170.089844 187.019531 C 164.449219 190.421875 154.453125 193.382812 148.070312 201.113281 C 142.523438 207.710938 135.765625 211.335938 129.8125 211.804688 C 123.859375 212.273438 118.726562 209.804688 115.695312 203.726562 L 115.691406 203.714844 L 115.683594 203.699219 C 113.800781 200.125 114.585938 194.488281 116.167969 188.539062 C 117.75 182.589844 120.023438 176.480469 120.328125 171.515625 L 120.328125 171.503906 C 120.648438 165.140625 121.007812 159.585938 122.074219 155.300781 C 123.144531 151.011719 124.828125 148.113281 127.808594 146.480469 C 127.945312 146.40625 128.085938 146.332031 128.222656 146.265625 C 128.558594 151.773438 131.289062 157.390625 136.105469 158.605469 C 141.382812 159.996094 148.984375 155.472656 152.195312 151.78125 C 152.835938 151.753906 153.460938 151.722656 154.070312 151.707031 C 156.886719 151.640625 159.246094 151.800781 161.664062 153.914062 L 161.675781 153.925781 C 163.53125 155.496094 164.414062 158.46875 165.179688 161.792969 C 165.945312 165.121094 166.554688 168.742188 168.851562 171.324219 L 168.851562 171.328125 L 168.855469 171.332031 C 173.265625 176.226562 174.683594 179.53125 174.558594 181.640625 Z M 174.558594 181.640625 "/>
<path ng-click="callback('Right feet')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 67.371094 197.238281 L 67.371094 197.269531 C 66.859375 203.953125 63.089844 207.59375 57.300781 208.917969 C 51.515625 210.238281 43.667969 208.921875 35.832031 204.824219 C 35.828125 204.824219 35.828125 204.824219 35.824219 204.824219 C 27.15625 200.230469 16.84375 200.6875 10.226562 199.304688 C 6.917969 198.613281 4.757812 197.574219 3.765625 195.644531 C 2.777344 193.710938 2.753906 190.34375 4.859375 184.601562 L 4.871094 184.578125 L 4.878906 184.550781 C 5.921875 181.339844 5.148438 177.824219 4.640625 174.523438 C 4.136719 171.226562 3.890625 168.226562 5.015625 166.132812 L 5.027344 166.113281 C 6.46875 163.335938 8.585938 162.339844 11.210938 161.398438 C 13.835938 160.457031 16.949219 159.71875 19.40625 157.253906 L 19.433594 157.226562 C 21.707031 154.828125 23.414062 151.820312 25.414062 149.691406 C 27.097656 147.890625 28.785156 146.695312 31.328125 146.679688 C 31.359375 146.683594 31.386719 146.683594 31.414062 146.679688 C 31.859375 146.683594 32.332031 146.71875 32.832031 146.796875 C 36.207031 147.308594 39.148438 149.667969 41.984375 153.511719 L 50.171875 168.429688 L 50.171875 168.4375 L 50.175781 168.441406 C 52.355469 172.988281 56.953125 177.992188 60.851562 183.09375 C 64.75 188.195312 67.765625 193.316406 67.371094 197.238281 Z M 67.371094 197.238281 "/>
<path ng-click="callback('Nose')" style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 108.191406 58.171875 C 107.535156 56.886719 106.191406 55.660156 103.90625 54.722656 L 103.902344 54.71875 L 103.894531 54.71875 C 99.140625 52.683594 97.078125 52.539062 94.425781 50.8125 C 90.109375 48.039062 86.542969 47.066406 83.578125 47.078125 C 82.023438 47.082031 80.636719 47.359375 79.394531 47.789062 C 75.78125 49.03125 73.386719 51.621094 71.882812 53.046875 L 71.878906 53.046875 C 71.878906 53.050781 71.878906 53.050781 71.878906 53.050781 C 71.582031 53.332031 71.203125 53.585938 70.28125 54.261719 C 69.355469 54.941406 67.964844 55.960938 65.964844 57.460938 C 64.1875 58.792969 63.609375 60.527344 64.226562 62.558594 C 64.835938 64.59375 66.796875 66.9375 70.382812 68.964844 L 70.386719 68.96875 L 70.394531 68.972656 C 72.621094 70.28125 74.140625 72.042969 75.886719 73.445312 C 76.757812 74.144531 77.675781 74.769531 78.78125 75.242188 C 79.886719 75.714844 81.175781 76.035156 82.789062 76.128906 C 86.578125 76.351562 89.371094 75.210938 91.832031 73.800781 C 94.300781 72.394531 96.390625 70.671875 98.789062 69.894531 L 98.792969 69.890625 L 98.796875 69.890625 C 103.710938 68.355469 107.21875 65.261719 108.316406 62.324219 C 108.863281 60.855469 108.847656 59.460938 108.191406 58.171875 Z M 108.191406 58.171875 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 95.722656 65.425781 C 91.8125 67.464844 87.246094 69.9375 82.386719 69.9375 C 77.527344 69.9375 73.691406 67.691406 70.929688 65.503906 C 69.550781 64.414062 68.429688 63.324219 67.585938 62.535156 C 66.117188 61.378906 66.292969 59.753906 66.898438 59.800781 C 67.90625 59.929688 68.058594 61.257812 68.695312 61.851562 C 69.554688 62.65625 70.632812 63.699219 71.9375 64.734375 C 74.546875 66.800781 78.027344 68.816406 82.386719 68.816406 C 86.734375 68.816406 91.8125 66.261719 94.914062 64.523438 C 96.667969 63.539062 98.902344 61.773438 100.726562 60.433594 C 102.121094 59.410156 102.070312 58.175781 103.222656 58.308594 C 104.375 58.445312 103.523438 59.675781 101.910156 61.082031 C 100.296875 62.492188 97.773438 64.359375 95.722656 65.425781 Z M 95.722656 65.425781 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 155.597656 148.867188 C 155.054688 148.847656 154.519531 148.851562 154 148.863281 C 153.953125 148.863281 153.90625 148.863281 153.855469 148.863281 C 155.199219 144.625 152.226562 141.496094 144.3125 137.917969 C 136.105469 134.308594 129.566406 134.664062 128.460938 141.988281 C 128.390625 142.371094 128.332031 142.765625 128.289062 143.160156 C 127.675781 143.375 127.058594 143.644531 126.441406 143.984375 C 122.585938 146.09375 120.484375 149.917969 119.3125 154.613281 C 118.144531 159.304688 117.808594 164.96875 117.488281 171.34375 C 117.488281 171.34375 117.488281 171.34375 117.488281 171.347656 C 117.289062 174.550781 115.96875 178.886719 114.636719 183.476562 C 101.191406 193.066406 82.53125 197.222656 66.683594 186.40625 C 65.613281 184.710938 64.378906 183.027344 63.113281 181.367188 C 62.300781 180.308594 61.46875 179.253906 60.644531 178.214844 C 62.269531 178.21875 63.652344 177.949219 64.769531 177.445312 C 66.160156 176.8125 67.136719 175.804688 67.621094 174.503906 C 68.585938 171.90625 67.613281 168.242188 64.523438 164.054688 C 61.429688 159.867188 56.191406 155.144531 48.496094 150.425781 C 48.496094 150.425781 48.496094 150.425781 48.496094 150.421875 C 42.84375 146.90625 39.683594 142.59375 38.203125 137.914062 C 36.71875 133.234375 36.925781 128.171875 38.070312 123.171875 C 40.261719 113.582031 45.886719 104.25 49.476562 98.394531 C 50.441406 97.683594 49.820312 99.714844 45.839844 107.105469 C 42.273438 113.859375 35.609375 129.449219 44.734375 141.621094 C 44.980469 132.960938 47.046875 124.128906 50.519531 115.867188 C 55.578125 104.402344 66.15625 84.519531 66.996094 68.675781 C 67.429688 68.992188 68.917969 69.996094 69.578125 70.371094 C 69.582031 70.375 69.582031 70.375 69.585938 70.375 C 71.523438 71.519531 72.984375 73.1875 74.871094 74.707031 C 76.761719 76.226562 79.125 77.539062 82.695312 77.746094 C 83.039062 77.765625 83.371094 77.773438 83.699219 77.773438 C 87.378906 77.773438 90.25 76.574219 92.640625 75.207031 C 95.238281 73.722656 97.3125 72.078125 99.28125 71.4375 C 99.28125 71.433594 99.285156 71.433594 99.289062 71.433594 C 103.445312 70.136719 106.746094 67.835938 108.628906 65.15625 C 111.859375 77.886719 119.367188 96.273438 124.195312 105.246094 C 126.761719 110.003906 131.867188 120.121094 134.074219 132.308594 C 135.46875 132.265625 137.011719 132.46875 138.65625 132.890625 C 144.425781 117.9375 133.769531 101.835938 128.894531 97.351562 C 126.925781 95.441406 126.832031 94.585938 127.808594 94.625 C 133.09375 99.300781 140.035156 108.703125 142.558594 119.320312 C 143.710938 124.160156 143.957031 129.25 142.722656 134.273438 C 143.324219 134.523438 143.941406 134.796875 144.5625 135.089844 C 153.820312 139.597656 157.242188 143.515625 155.597656 148.867188 Z M 155.597656 148.867188 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 108.628906 43.507812 C 108.648438 46.03125 108.210938 48.175781 107.253906 50.371094 C 106.710938 51.621094 106.082031 52.671875 105.332031 53.578125 C 105.074219 53.457031 104.808594 53.339844 104.535156 53.226562 C 103.582031 52.820312 102.738281 52.484375 101.984375 52.199219 C 101.230469 51.914062 100.640625 51.71875 100.03125 51.511719 C 100.472656 50.976562 101.339844 50.351562 101.664062 49.5625 C 102.152344 48.375 102.394531 47.214844 102.4375 45.832031 C 102.4375 45.777344 102.457031 45.730469 102.457031 45.664062 C 102.484375 44.339844 102.308594 43.207031 101.921875 42.046875 C 101.515625 40.832031 101 39.957031 100.253906 39.226562 C 99.507812 38.5 98.761719 38.171875 97.867188 38.140625 C 97.824219 38.136719 97.785156 38.136719 97.742188 38.136719 C 96.902344 38.140625 96.171875 38.429688 95.417969 39.058594 C 94.625 39.722656 94.039062 40.570312 93.546875 41.75 C 93.0625 42.929688 92.820312 44.101562 92.773438 45.492188 C 92.765625 45.546875 92.765625 45.59375 92.765625 45.648438 C 92.75 46.414062 92.796875 47.113281 92.914062 47.792969 C 91.195312 46.933594 88.996094 46.308594 87.476562 45.949219 C 87.386719 45.289062 87.335938 44.613281 87.324219 43.902344 L 87.324219 43.710938 C 87.296875 41.195312 87.707031 39.039062 88.675781 36.847656 C 89.644531 34.65625 90.839844 33.078125 92.523438 31.796875 C 94.210938 30.515625 95.871094 29.929688 97.832031 29.910156 L 97.925781 29.910156 C 99.84375 29.910156 101.488281 30.476562 103.175781 31.699219 C 104.886719 32.941406 106.121094 34.496094 107.117188 36.671875 C 108.09375 38.792969 108.5625 40.863281 108.609375 43.324219 C 108.609375 43.386719 108.609375 43.441406 108.628906 43.507812 Z M 108.628906 43.507812 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 79.609375 46.019531 C 79.355469 46.09375 79.109375 46.171875 78.867188 46.253906 C 77.492188 46.726562 76.402344 47.25 75.347656 47.949219 C 75.449219 47.21875 75.464844 46.480469 75.382812 45.652344 C 75.375 45.605469 75.375 45.570312 75.375 45.523438 C 75.265625 44.425781 75.035156 43.507812 74.644531 42.578125 C 74.234375 41.609375 73.769531 40.925781 73.164062 40.402344 C 72.613281 39.925781 72.09375 39.707031 71.519531 39.710938 C 71.460938 39.710938 71.402344 39.714844 71.339844 39.71875 C 70.695312 39.773438 70.160156 40.089844 69.652344 40.707031 C 69.148438 41.320312 68.816406 42.085938 68.574219 43.101562 C 68.335938 44.113281 68.273438 45.109375 68.375 46.25 C 68.375 46.296875 68.382812 46.335938 68.382812 46.378906 C 68.492188 47.488281 68.714844 48.40625 69.109375 49.335938 C 69.515625 50.292969 69.984375 50.976562 70.59375 51.5 C 70.695312 51.589844 70.796875 51.667969 70.894531 51.738281 C 70.265625 52.226562 69.84375 52.574219 69.324219 52.953125 C 68.988281 53.195312 68.59375 53.484375 68.136719 53.824219 C 67.132812 52.886719 66.351562 51.703125 65.664062 50.148438 C 64.855469 48.308594 64.421875 46.464844 64.292969 44.289062 L 64.292969 44.273438 C 64.171875 42.097656 64.386719 40.226562 64.984375 38.292969 C 65.582031 36.359375 66.382812 34.957031 67.546875 33.808594 C 68.703125 32.65625 69.875 32.074219 71.285156 32.003906 C 71.394531 31.996094 71.503906 31.996094 71.609375 31.996094 C 72.886719 31.996094 74.027344 32.421875 75.207031 33.363281 C 76.488281 34.386719 77.453125 35.695312 78.265625 37.539062 C 79.078125 39.378906 79.511719 41.222656 79.628906 43.398438 L 79.628906 43.414062 C 79.6875 44.328125 79.679688 45.1875 79.609375 46.019531 Z M 79.609375 46.019531 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 86.023438 51.222656 C 86.183594 51.742188 87.019531 51.65625 87.503906 51.90625 C 87.925781 52.121094 88.269531 52.601562 88.746094 52.617188 C 89.199219 52.628906 89.910156 52.457031 89.96875 52.007812 C 90.046875 51.410156 89.175781 51.03125 88.613281 50.8125 C 87.894531 50.53125 86.96875 50.386719 86.292969 50.765625 C 86.136719 50.851562 85.96875 51.054688 86.023438 51.222656 Z M 86.023438 51.222656 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(12.54902%,12.54902%,12.54902%);fill-opacity:1;" d="M 81.082031 51.222656 C 80.917969 51.742188 80.082031 51.65625 79.597656 51.90625 C 79.175781 52.121094 78.832031 52.601562 78.355469 52.617188 C 77.902344 52.628906 77.195312 52.457031 77.132812 52.007812 C 77.054688 51.410156 77.925781 51.03125 78.488281 50.8125 C 79.207031 50.53125 80.132812 50.386719 80.808594 50.765625 C 80.964844 50.851562 81.132812 51.054688 81.082031 51.222656 Z M 81.082031 51.222656 "/>
</g>
</svg>

学分：

ellipses.svg : https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_ellipse2 tux-mono.svg：https://upload.wikimedia.org/wikipedia/commons/3/3a/Tux_Mono.svg

演示

当您单击 svg 图像中的一个椭圆时，会在包含该图像的组件内部调用回调，并使用组件唯一 ID 和单击的对象名称广播一个事件。

Demo on Plunker

【讨论】：

在 Plunker 上添加了一个演示 plnkr.co/edit/… @Nick 您是否使用过此解决方案并回答了您的问题？

以上是关于外部 SVG 文档可以包含 AngularJS ng-click 或 ng-model 指令吗？的主要内容，如果未能解决你的问题，请参考以下文章

包含在 HTML 中的带有“img”标签的 SVG 可以链接到带有“image”标签的外部图像吗？

替换 SVG 文档中的变量（在 YAML 中外部定义）

带有svg图像模板的angularjs

Chart Js库中是不是有任何函数可以在angularjs中获取SVG？

AngularJs学习笔记——ng-include

使用对 Canvas 的外部引用来渲染 SVG