d3.select на inkscape: label = "foo" - PullRequest
Новая
       36

d3.select на inkscape: label = "foo"

1 голос
/ 09 июня 2019

Я пытаюсь выбрать слой по его свойству inkscape:label, чтобы иметь возможность показать / скрыть слой на веб-сайте. 

function hideFOO() {
    if(d3.select("#hideFOO:checked").node()){
        d3.select("#layer11").attr("visibility", "hidden");
    } else {
        d3.select("#layer11").attr("visibility", "visible");        
    }
}

SVG: 

<g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline"> ...

Это работает просто отлично - но я бы хотел иметь возможность указать inkscape:label, так как идентификаторы слоев не совпадают для нескольких SVG, но имена слоев.

Когда я пытаюсь что-то вроде;d3.select(":inkscape:label='foo'").attr("visibility", "hidden"); Мне только что сказали;SyntaxError: ':inkscape:label='foo'' is not a valid selector

или d3.select("$('g[inkscape:label="foo"]')").attr("visibility", "hidden");, который говорит мне SyntaxError: missing ) after argument list хотя все мои ')' закрыты?!

Основано на решении ниже - я также пытался с d3.select('g[inkscape\\:label = "foo"]').attr("visibility", "hidden");, но этотакже не скрывая слой - при воспроизведении в консоли разработчика для браузера кажется, что d3.select не соответствует пути.

1 Ответ

0 голосов
/ 09 июня 2019

Вот как вы можете сделать видимость скрытой с помощью CSS:

Идея состоит в том, что вам нужно использовать пространство имен inkscape 

/*declare the prefix for the namespace*/
@namespace ink "http://www.inkscape.org/namespaces/inkscape";

/*escape the colon : or use the pipe |*/
[inkscape\:label="foo"], [ink|label="foo"] {
/*visibility:hidden*/
fill:red;}

svg{border:1px solid}
<svg>
  <g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline">
    <rect width="100" height="50"/>
  </g>
</svg>

Прочтите эту статью о пространствах имен XML в CSS , Использование SVG с CSS3 и HTML5 дополнительных материалов

И вот как вы можете сделать это с помощью JavaScript (вы не можете использовать префиксы пространства имен в методах querySelector() и querySelectorAll()): 

let g = document.querySelector('g[inkscape\\:label = "foo"]')
 //g.style.visibility = "hidden"
 g.style.fill = "red"
svg{border:1px solid}
<svg>
  <g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline">
    <rect width="100" height="50"/>
  </g>
  
</svg>
...