Svg clipPath в приложении AngularJS с базовым элементом HTML

Я использую svg clipPath в моем проекте AngularJS. У меня проблема с указанием относительного URL-адреса клипа, потому что мне нужно использовать элемент <base> в моем проекте.

Например, этот код работает в проекте без base, но не в проекте с <base href="/">

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <rect x="10" y="10" width="60" height="60"></rect>
        </clipPath>
    </defs>

    <g clip-path="url(#myClip)">
        <circle cx="30" cy="30" r="20"/>
        <circle cx="70" cy="70" r="20"/>
    </g>

</svg>

Как это можно решить? Я использую ui-router, если это имеет отношение к вопросу...

Этот вопрос примерно такой же, но "решение" найденное OP заключалось в том, чтобы удалить базу, которая не является решением в моем случае.

Ответы

Ответ 1

Изменить

<g clip-path="url(#myClip)">

Итак, вы используете абсолютный URL + идентификатор фрагмента, а не только идентификатор фрагмента. Например. url (http://mydomain.com/mypage#myClip)

Возможно, вы сможете удалить некоторые части, например. http и домен, если базовый тег соответствует абсолютному URL-адресу, так что /mypage # myClip может работать.

Ответ 2

В случае, если кому-то нужна функция, чтобы сделать это здесь, в чистом JS:

Сохраняет исходный клип в атрибуте данных элемента и каждый раз вызывает его, использует document.location.href для использования абсолютных путей для url()

function fixClipPaths(svg, restore) {
    Array.prototype.forEach.call(svg.querySelectorAll('*[clip-path]'), function (el) {
        var clipUrl = el.getAttribute('clip-path');

        if(!el.getAttribute('data-original-clip-path')) {
            el.setAttribute('data-original-clip-path', clipUrl);
        }

        el.setAttribute('clip-path', 'url('+ (!restore ? document.location.href : '') + el.getAttribute('data-original-clip-path').substr(4));
    });
}

// usage example
fixClipPaths(document.getElementsByTagName('svg')[0]);