각도 및 SVG 필터

각도 및 SVG 필터

SVG를 AngularJS와 함께 사용할 때 이상한 행동을 하게 되었습니다.루트를 설정하기 위해 서비스를 사용하고 있습니다.이 심플한 SVG를 템플릿에 넣으면 모든 것이 정상입니다.

<div id="my-template">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect fill="red" height="200" width="300" />
    </svg>
    // ...
</div>

단, 예를 들어 다음과 같은 코드를 가진 필터를 추가할 경우:

<div id="my-template">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="blurred">
                <feGaussianBlur stdDeviation="5"/>
            </filter>
        </defs>
        <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
    </svg>
</div>

그 후, 다음과 같이 입력합니다.

• 내 홈페이지에서 작동한다.
• 파이어폭스를 사용하면 SVG는 다른 페이지에서는 보이지 않지만 여전히 원래 있던 위치에 공간을 남깁니다.Chrome에서는 SVG는 보이지만 전혀 흐리지 않습니다.
• (Firebug를하여) (Firebug를 하여) SVG를 가 다시 됩니다.filterstylecontraction을 합니다.

루트 설정은 다음과 같습니다.

$routeProvider
    .when('/site/other-page/', {
            templateUrl : 'view/Site/OtherPage.html',
            controller : 'Site.OtherPage'
    })
    .when('/', {
            templateUrl : 'view/Site/Home.html',
            controller : 'Site.Home'
    })
    .otherwise({
        redirectTo : '/'
    })
;

Fiddle

Firefox에서는 Chrome in a Fielle의 문제를 재현하지 못했습니다.

를 SVG로 SVG 를 작성하려고 .document.createElementNS().

무슨 일이 일어나고 있는지 아는 사람이 있나요?

문제

문제는 제 HTML 페이지에 태그가 있다는 것입니다.따라서 필터를 식별하기 위해 사용되는 IRI는 현재 페이지가 아니라 에 표시된 URL과 관련이 있습니다.<base>붙이다

은 제 이기도 했습니다.http://example.com/my-folder/예를 들어.

에는, 「 」를 참조해 주세요.http://example.com/my-folder/site/other-page/를 들어, 「」라고 하는 것은,#blurred는, URL 「URL」로되었습니다.http://example.com/my-folder/#blurredJavaScript 청는 GET 、 AngularJS가 없는 경우에는 템플릿이 로드되지 않은 단순한 기본 페이지입니다.①은#blurred이 페이지에는 필터가 없습니다.

이 경우 Firefox는 다음 명령을 렌더링하지 않습니다.<rect>(이것은 정상적인 동작입니다.W3C의 권장 사항을 참조해 주세요).크롬은 필터를 적용하지 않습니다.

의 경우, 「 」#blurred는, 절대 「URL」에서도 계산됩니다.http://example.com/my-folder/#blurredURL 도입도도 、 URL 。에, GET는 송신할 필요가 없습니다.#blurred필터가 존재합니다.

http://example.com/my-folder/하지만 제 변호로는 자바스크립트 파일에 대한 수많은 다른 요청으로 인해 손실되었습니다.

해결 방법

경우,<base>태그는 필수입니다.해결 방법은 절대 IRI를 사용하여 필터를 식별하는 것입니다.AngularJS의 도움으로 이것은 매우 간단합니다.컨트롤러 또는 SVG에 링크된 디렉티브로 서비스를 주입하고absUrl()getter:

$scope.absUrl = $location.absUrl();

SVG에서는 다음 속성을 사용합니다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="blurred">
            <feGaussianBlur stdDeviation="5"/>
        </filter>
    </defs>
    <rect style="filter:url({{absUrl}}#blurred)" fill="red" height="200" width="300" />
</svg>

---

관련: HTML 페이지에 BASE 태그가 있으면 SVG Gradient가 검은색으로 변합니까?

그것은 내가 전에 관찰한 행동처럼 보인다.근본 원인은 동일한 ID(블러)를 가진 여러 요소(필터)가 존재하는 것입니다.브라우저에 따라 처리 방법이 다릅니다.

다음은 사례를 재현하기 위해 수행한 작업입니다.http://jsfiddle.net/z5cwZ/ svg가 2개 있고 하나는 숨겨져 있습니다.firefox에는 아무것도 표시되지 않습니다.

ID의 경합을 회피하기 위해서는 2가지 방법이 있습니다.먼저 템플릿에서 고유한 ID를 생성할 수 있습니다(angularjs tough에서는 어쩔 수 없습니다).다음은 예를 제시하겠습니다.http://jsfiddle.net/KbCLB/1/

두 번째 가능성은 angularjs에서는 필터를 개별 svgs 외부에 설치하는 것이 더 쉬울 수 있습니다(http://jsfiddle.net/zAbgr/1/):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
    <defs>
        <filter id="blurred">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
    <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
</svg>
<br/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
</svg>

방금 이 문제에 부딪혔어요.@Blackhole의 답변에서 확장하면 모든 채우기 속성의 값을 변경하는 지시어를 추가하는 것이 솔루션이었습니다.

angular.module('myApp').directive('fill', function(
    $location
) { 'use strict';
    var absUrl = 'url(' + $location.absUrl() + '#';

    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            $attrs.$set('fill', $attrs.fill.replace(/url\(#/g, absUrl));
        }
    };
});

저도 최근에 이 문제에 부딪혔는데, svg가 다른 경로에서 사용되는 경우 $location을 각 경로에 추가해야 합니다.이를 구현하는 더 좋은 방법은 window.location을 사용하는 것입니다.$location 서비스 대신 href를 사용합니다.

svg link:hrefs에도 문제가 있었습니다.그건 네, 이 문제가<base>- 절대 URL 연결 시 엄격한 컨텍스트 이스케이프 제한으로 인해 오류가 발생하였습니다.

저의 해결책은 절대 URL을 추가하고 연결을 신뢰하는 필터를 작성하는 것이었습니다.

angular.module('myApp').filter('absUrl', ['$location', '$sce', function ($location, $sce) {
    return function (id) {
        return $sce.trustAsResourceUrl($location.absUrl() + id);
    };
}]);

그리고 이렇게 사용하세요.{{'#SVGID_67_' | absUrl}

결과:http://www.example.com/deep/url/to/page#SVGID_67_$sce 오류 없음

언급URL : https://stackoverflow.com/questions/19742805/angular-and-svg-filters