Sie müssen es nicht auf und ab skalieren. Es gibt keinen wirklichen Nutzen davon, oder? Dann können Sie foreignObject height und width auf 1 setzen und über CSS foreignObject { overflow: visible; } setzen.
Ich mache eine Visualisierung mit der D3 Javascript Bibliothek. Ich möchte Tooltips für einige Elemente der Visualisierung erstellen und mein Kunde möchte, dass sie wie "Papierschnipsel / Post-its" aussehen. Anfangs habe ich einfache DIVs für die Tooltips erstellt, wobei ich einige nette CSS-Tricks verwendet habe, um das gewünschte Aussehen zu erzeugen. (inspiriert von dieses Tutorial )
Ich würde gerne die Tooltips in das SVG foreignObject-Element kapseln, damit es besser zur Visualisierung passt und ich sie einfach manipulieren kann. (z. B. Zoomen / Panning) Meine Frage ist also: Wie bekomme ich die richtige Größe des DIV, das innerhalb des foreignObject-Elements liegt, damit ich die Größe des foreignObject-Elements genau einstellen kann? Vor allem bei Verwendung von margin / padding / shadow ....
Ich habe es mit .getBoundingClientRect () herausgefunden, aber ich weiß nicht, ob das der beste Weg ist.
Hier ist ein Code-Beispiel:
%Vor%Hier ist ein funktionierendes jsFiddle-Beispiel: Ссылка
BEARBEITEN:
Ich habe festgestellt, dass .getBoundingClientRect () für verschiedene Shadow-Box-Einstellungen nicht funktioniert. Ich habe auch festgestellt, dass mit meiner ersten Lösung die .getBoundingClientRect () zu große Größe zurückgibt, besonders in der richtigen Größe.
Also habe ich einen anderen Weg versucht, indem ich die jQuerys .outerWidth (true) /. outerHeight (true) benutze und die Schattengröße manuell berechne. Das scheint gut zu funktionieren, aber es fühlt sich schrecklich an, so etwas zu tun.
Gibt es einen anderen Weg, um die genaue Größe eines DIV mit all seinen Komponenten zu erhalten?
Aktualisiert jsFiddle ist hier: Ссылка
Ich habe schon früher damit zu kämpfen gehabt und ich fand, dass es am einfachsten ist, sich nur auf Bootstrap's Tooltip zu verlassen .
z.
%Vor% Es läuft darauf hinaus, title und data-content Attribute zu jedem beliebigen svg Element hinzuzufügen, an dem Sie Tootltips hinzufügen möchten. Stellen Sie dann den Inhalt gleich wie gewünscht ein. In Ihrem Fall wäre also html
Verwandte:
Wie zeige ich einen Bootstrap-Tooltip mit einem SVG-Objekt; Frage zu Stack Overflow
Sie müssen es nicht auf und ab skalieren. Es gibt keinen wirklichen Nutzen davon, oder? Dann können Sie foreignObject height und width auf 1 setzen und über CSS foreignObject { overflow: visible; } setzen.
Ich mache eine Visualisierung mit der D3 Javascript Bibliothek. Ich möchte Tooltips für einige Elemente der Visualisierung erstellen und mein Kunde möchte, dass sie wie "Papierschnipsel / Post-its" aussehen. Anfangs habe ich einfache DIVs für die Tooltips erstellt, wobei ich einige nette CSS-Tricks verwendet habe, um das gewünschte Aussehen zu erzeugen. (inspiriert von dieses Tutorial )
Ich würde gerne die Tooltips in das SVG foreignObject-Element kapseln, damit es besser zur Visualisierung passt und ich sie einfach manipulieren kann. (z. B. Zoomen / Panning) Meine Frage ist also: Wie bekomme ich die richtige Größe des DIV, das innerhalb des foreignObject-Elements liegt, damit ich die Größe des foreignObject-Elements genau einstellen kann? Vor allem bei Verwendung von margin / padding / shadow ....
Ich habe es mit .getBoundingClientRect () herausgefunden, aber ich weiß nicht, ob das der beste Weg ist.
Hier ist ein Code-Beispiel:
%Vor%Hier ist ein funktionierendes jsFiddle-Beispiel: Ссылка
BEARBEITEN:
Ich habe festgestellt, dass .getBoundingClientRect () für verschiedene Shadow-Box-Einstellungen nicht funktioniert. Ich habe auch festgestellt, dass mit meiner ersten Lösung die .getBoundingClientRect () zu große Größe zurückgibt, besonders in der richtigen Größe.
Also habe ich einen anderen Weg versucht, indem ich die jQuerys .outerWidth (true) /. outerHeight (true) benutze und die Schattengröße manuell berechne. Das scheint gut zu funktionieren, aber es fühlt sich schrecklich an, so etwas zu tun.
Gibt es einen anderen Weg, um die genaue Größe eines DIV mit all seinen Komponenten zu erhalten?
Aktualisiert jsFiddle ist hier: Ссылка
Ich habe schon früher damit zu kämpfen gehabt und ich fand, dass es am einfachsten ist, sich nur auf Bootstrap's Tooltip zu verlassen .
z.
%Vor%Es läuft darauf hinaus, %code% und %code% Attribute zu jedem beliebigen svg Element hinzuzufügen, an dem Sie Tootltips hinzufügen möchten. Stellen Sie dann den Inhalt gleich wie gewünscht ein. In Ihrem Fall wäre also %code%
%Vor%Verwandte:
Wie zeige ich einen Bootstrap-Tooltip mit einem SVG-Objekt; Frage zu Stack Overflow