小编May*_*ayo的帖子

向 SVG 添加类

我抓取了一个 SVG 文件、一张纽约州地图,并想向各种元素(县)添加类。

我尝试通过 javascript 添加一个类。该类已添加,但视觉上没有任何反应。我尝试直接插入类。那行不通。我尝试向现有 ID 添加填充,但没有执行任何操作。

现有代码如下所示:

<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633 
Run Code Online (Sandbox Code Playgroud)

如前所述,我尝试添加一个类,将填充信息添加到现有 ID (St_Lawrence),但这不起作用。但是添加内联样式是有效的(见下文)

<polygon id="St_Lawrence" style="fill:#FF0000;" points="404.480957,7.098633 
Run Code Online (Sandbox Code Playgroud)

不幸的是,这并没有真正的帮助。

基本代码如下:

<svg xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
     style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">

<g id="Layer_1">
            <g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
                <polygon id="St_Lawrence" points="404.480957,7.098633 404.581543,7.098633 404.581543,7.098633 
                    406.171387,7.099609 406.171387,7.099609 406.218262,7.109375 406.218262,7.109375 406.313965,7.109375 408.001465,7.123047 
                    408.001465,7.123047 408.050293,7.123047 408.050293,7.123047 410.122559,7.138672 410.591309,11.53125 410.591309,11.53125 
Run Code Online (Sandbox Code Playgroud)

编辑:

我使用了另一个 SVG 文件并让类正常工作。对 SVG 不太了解,无法解释为什么这个可以工作,而第一个却不行。

css svg

7
推荐指数
1
解决办法
2万
查看次数

jQuery的toggleClass和.css文件中的类名顺序

背景:

我的文字带有一个指向右侧的箭头,单击文本/箭头显示一个div并用arrowDown替换arrowRight.

问题:

问题源于我的代码根据.css文件中的顺序工作的事实,我不知道为什么这应该与jQuery有关.

CSS:

.arrow{display:inline-block;  width:15px; height:10px;background-repeat:no-repeat;}
.arrowRight{background-image:url("../graphics/triangleRight.gif"); }
.arrowDown{ background-image: url("../graphics/triangleDown.gif");}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="showListOfBids" class="align-c">
     List of Bids <div class="arrow arrowRight">
</div>
Run Code Online (Sandbox Code Playgroud)

jQuery的

$("#showListOfBids").click(function(){
   $(".bidList").toggleClass("show");
   $(".arrowRight").toggleClass("arrowDown");
});
Run Code Online (Sandbox Code Playgroud)

开发者工具>元素

切换添加和删除arrowDown

切换关:

<div class="arrow arrowRight"></div>
Run Code Online (Sandbox Code Playgroud)

切换:

<div class="arrow arrowRight arrowDown"></div>  
Run Code Online (Sandbox Code Playgroud)

问题:为什么类.arrowDown的顺序会影响显示?AFAIK使用jQuery时没有重新解析css文件.jQuery将类添加到DOM中,解析器只搜索该元素.

评论:我不喜欢在课堂上加倍翻转.我使用不正确吗?我正在使用removeClass和addClass并切换到toggleClass

javascript css jquery

0
推荐指数
1
解决办法
215
查看次数

标签 统计

css ×2

javascript ×1

jquery ×1

svg ×1