Поведение g-элемента SVG и атрибута видимости

Question

Здравствуйте, на данный момент я пытаюсь включить SVG в качестве основного формата отображения для моего приложения. Однако я обнаружил довольно странное поведение, когда дело доходит до атрибута видимости. С учетом этого примера:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"> 
    <g id="visibility-test"> 
     <rect x="100" y="0" height="140" width="40"/> 
     <rect x="0" y="100" height="40" width="140" visibility="visible"/> 
    </g>     
</svg> 

Это ведет себя так, как ожидалось. Два прямоугольника видны. Теперь я хочу, чтобы сделать всю группу я установить видимость г-элемент скрыт, как, например:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"> 
    <g id="visibility-test" visibility="hidden"> 
     <rect x="100" y="0" height="140" width="40"/> 
     <rect x="0" y="100" height="40" width="140" visibility="visible"/> 
    </g>     
</svg> 

Если вы посмотрите на это в браузере скрывает один прямоугольник (тот, без какого-либо атрибута), но один с атрибутом видимости остается видимым. Я бы ожидал поведения, когда затронута видимость всей ветви, но родительский элемент.

Есть ли способ достичь такого поведения, не изменяя видимость когда-либо ребенка?

Answer 1

SVG не работает, как HTML в DOM. SVG is namespaced. Браузер использует парсер HTML для анализа HTML-кода на веб-странице. И браузер также будет использовать парсер XML для разметки SVG на веб-странице. Поэтому их обрабатывают по-разному, даже если они отображаются на одной странице.

Если у родителя есть атрибут visibility. И у любого из их детей также есть атрибут visibiity. Затем вам необходимо изменить этот атрибут visibility на inherit. SVG позволит ребенку оставаться видимым, даже если его родительский элемент установлен в скрытое.

W3C SVG атрибут видимости спецификации:

http://www.w3.org/TR/SVG11/painting.html#VisibilityProperty

Доступные значения для атрибута видимости SVG:

visible | hidden | collapse | inherit 

Но вы должны либо поместить атрибут родительского элемента <g>visibility или место это индивидуально. Значение по умолчанию для SVG attribute: inherit. Таким образом, SVG будет соблюдать состояние видимости элемента, к которому он применяется независимо от его родителя visibility.