examples/follow.js

@@ -7,6 +7,16 @@ const Demo = () => {
   const [left, setLeft] = React.useState(100);
   const [top, setTop] = React.useState(100);
   const [visible, setVisible] = React.useState(true);
+  const [svg, setSvg] = React.useState(false);
+
+  const sharedStyle: React.CSSProperties = {
+    width,
+    height,
+    position: 'absolute',
+    left,
+    top,
+    display: visible ? 'flex' : 'none',
+  };
 
   return (
     <div>
@@ -29,6 +39,14 @@ const Demo = () => {
       >
         Trigger Visible
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          setSvg(!svg);
+        }}
+      >
+        Follow SVG ({String(svg)})
+      </button>
 
       <div
         style={{
@@ -38,27 +56,26 @@ const Demo = () => {
           position: 'relative',
         }}
       >
-        <div
-          style={{
-            width,
-            height,
-            border: '1px solid green',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'absolute',
-            left,
-            top,
-            display: visible ? 'flex' : 'none',
-          }}
-          id="content"
-        >
-          Content
-        </div>
+        {svg ? (
+          <svg id="content" width={width} height={height} style={sharedStyle}>
+            <rect x="0" y="0" width={width} height={height} />
+          </svg>
+        ) : (
+          <div
+            style={{
+              border: '1px solid green',
+              boxSizing: 'border-box',
+              alignItems: 'center',
+              justifyContent: 'center',
+              ...sharedStyle,
+            }}
+            id="content"
+          >
+            Content
+          </div>
+        )}
 
-        <Align
-          target={() => document.getElementById('content')}
-          align={{ points: ['tc', 'bc'] }}
-        >
+        <Align target={() => document.getElementById('content')} align={{ points: ['tc', 'bc'] }}>
           <div
             style={{
               border: '1px solid blue',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-align",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "align ui component for react",
   "keywords": [
     "react",
@@ -42,7 +42,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "2.x",
     "dom-align": "^1.7.0",
-    "rc-util": "^5.0.1",
+    "rc-util": "^5.3.0",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {

src/Align.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import { composeRef } from 'rc-util/lib/ref';
+import isVisible from 'rc-util/lib/Dom/isVisible';
 import { alignElement, alignPoint } from 'dom-align';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 
@@ -79,7 +80,7 @@ const Align: React.RefForwardingComponent<RefAlign, AlignProps> = (
       const { activeElement } = document;
 
       // We only align when element is visible
-      if (element && element.offsetParent) {
+      if (element && isVisible(element)) {
         result = alignElement(source, element, align);
       } else if (point) {
         result = alignPoint(source, point, align);