我想隐藏/显示我的SVG元素,同时在anguarJS中使用它

I want to hide/show my SVG elements, while using it in anguarJS

本文关键字:anguarJS 隐藏 显示 我的 元素 SVG      更新时间:2023-09-26

有人能给我推荐一个JS函数吗?它可以让这个SVG可见,因为它在没有角度JS的情况下工作得很完美。

<div class="app" ng-app ng-style="disableCircle">
    <div ng-controller="ctrlSizing">
        <label id="rad" style="visibility: hidden">Radius: <input ng-model="rad" type="number" placeholder="How about 300?"></label>
        <div id="circle" style="height: 800; width: 500; position:absolute; left: 100px;top: 100px;">
            <svg width="500" height="500" visibility="visible" onclick="cInput()" >
                <circle id="circle1" cx="150" cy="150" ng-attr-r="{{rad}}" stroke="black" stroke-width="2" fill="grey" />
            </svg>
        </div>
    </div>
</div>
<div>
    <input id="button1" type="button" value="Circle" onclick="circleDraw()">
</div>

使用JS隐藏通过id或遍历DOM检索到的元素。

svgElement.style.display = "none";

svgElement.style.opacity = 0;

有关如何使用JS与SVG交互的更多信息,您可以查看本文与SVG 的接口