AngularJS 应用程序中的 Svg clipPath 与 HTML 基本元素 [英] Svg clipPath in AngularJS app with HTML Base Element
问题描述
我在我的 AngularJS 项目中使用 svg clipPath
.我在为 clipPath 指定相对 url 时遇到问题,因为我需要在我的项目中使用 <base>
元素.
I use svg clipPath
in my AngularJS project. I have a problem with specifying a relative url to the clipPath because i need to use the <base>
element in my project.
例如,此代码在没有 base
的项目中有效,但在具有 <base href="/">
For example this code works in a project without base
, but not in a project with <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,如果这与问题有关...
How can this be solved? I use ui-router, if that is relevant to the question...
这个问题是关于相同,但 OP 找到的解决方案"是删除在我的情况下不是解决方案的基础.
This question is about the same, but the "solution" the OP found was to remove the base which isn't a solution in my case.
推荐答案
更改
<g clip-path="url(#myClip)">
这样您就可以使用绝对 URL + 片段标识符,而不仅仅是单独的片段标识符.例如.url(http://mydomain.com/mypage#myClip)
So that you're using an absolute URL + a fragment identifier rather than just a fragment identifier on its own. E.g. url(http://mydomain.com/mypage#myClip)
您也许可以移除某些部件,例如如果基本标记与绝对 URL 匹配,则 http 和域,因此/mypage#myClip 可能会起作用.
You may be able to remove some parts e.g. the http and the domain if the base tag matches the absolute URL so /mypage#myClip might work.
这篇关于AngularJS 应用程序中的 Svg clipPath 与 HTML 基本元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!