SVG D3: отображать элемент только внутри определенной группы или определенного SVG
Есть ли способ отобразить элемент D3 только в определенной группе?
Допустим, у меня есть 2 прямоугольных элемента, расположенных бок о бок в SVG. И я хочу показать круг только внутри первого прямоугольника. Если круг переместился во вторую позицию прямоугольного элемента, круг не должен отображаться поверх второго прямоугольника.
Этого можно достичь, используя элемент SVG внутри элемента SVG, как показано ниже:
<svg id = "outer">
<svg id = "inner1">
</svg>
<svg id = "inner2">
</svg>
</svg>
То же самое можно увидеть по следующей ссылке: https://hitokun-s.github.io/old/demo/path-between-two-svg.html
Но если я использую это так, я не смогу стилизовать внутренние SVG.
заранее спасибо
@ccprog Я имел в виду, если я использую внутренние и внешние SVG. Я не хочу добавлять границу к внутреннему SVG. Надеюсь, это проясняет.
@Alexander: Да, с viewBox можно иметь SVG внутри SVG. Но я не могу стилизовать внутренний SVG. Я хочу добавить границу к внутреннему SVG.
SVG не имеет границ. Просто используйте <rect> с обводкой и без заливки, чтобы смоделировать ее.
Привет, @Alexander, SVG может иметь границы. См. Ссылку, которую я привел в примере. Дело не только в границе. У меня не может быть никаких стилей (например, background-color, border, fill) во «внутреннем» SVG. "Внешний" SVG принимает любой стиль.
Используйте инструменты разработки браузера для вышеупомянутого примера, и вы увидите, что прямоугольники используются для имитации границ для внутренних <svg>.
Спасибо @Alexander, да, прямоугольник используется для добавления границы. Для моего решения мне придется использовать вложенные SVG, а затем использовать прямоугольники для стилизации.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ответ на мой вопрос после нескольких часов поисков.
Этого можно достичь, разместив «внутренний» SVG внутри элемента div.
<svg id = "outer">
<foreignObject>
<div>
<svg id = "inner" style = "border-radius: 20px; border: 1px solid red;">
</svg>
</div>
</foreignObject>
</svg
Элемент Div может быть помещен в svg с помощью элемента foreignObject. Тогда «внутренний» SVG рассматривается как «внешний» элемент, и к нему можно применить стили.
Надеюсь, это поможет любой другой бедной душе.
«Но если я использую это так, я не смогу стилизовать внутренние SVG». Я не понимаю этого предложения. Что тебе мешает?