背景,html中嵌入了SVG,定位元素時,不能定位到。圖表上的元素來自SVG-namespace,因此您不能使用通用語法來選擇這些元素(您將無法通過其標簽名稱選擇元素,例如//svg
或//path
,等等)
SVG 意為可縮放矢量圖形(Scalable Vector Graphics)。
SVG 使用 XML 格式定義圖像。
SVG與其他圖像格式相比,SVG的優勢在於
- SVG 可被非常多的工具讀取和修改(比如記事本)
- SVG 與 JPEG 和 GIF 圖像比起來,尺寸更小,且可壓縮性更強。
- SVG 是可伸縮的
- SVG 圖像可在任何的分辨率下被高質量地打印
- SVG 可在圖像質量不下降的情況下被放大
- SVG 圖像中的文本是可選的,同時也是可搜索的(很適合制作地圖)
- SVG 可以與 Java 技術一起運行
- SVG 是開放的標准
- SVG 文件是純粹的 XML
解決方案:
<rect>
<rect>
元素是基本的SVG形狀,可創建矩形,該矩形由其角的位置,寬度和高度定義。矩形的角可能會變圓。
一個例子:
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- Simple rect element --> <rect x="0" y="0" width="100" height="100" /> <!-- Rounded corner rect element --> <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /> </svg>
屬性<rect>
元素的attributes如下:x
:此屬性確定矩形的x坐標。
值類型:| ;默認值:0動畫:是y
:此屬性確定矩形的y坐標。
值類型:| ;默認值:0動畫:是width
:此屬性確定矩形的寬度。
值類型:自動|| ;默認值:自動;動畫:是height
:此屬性確定矩形的高度。
值類型:自動|| ;默認值:自動;動畫:是rx
:此屬性確定矩形的水平角半徑。
值類型:自動|| ;默認值:自動;動畫:是ry
:此屬性確定矩形的垂直角半徑。
值類型:自動|| ;默認值:自動;動畫:是pathLength
:此屬性允許以用戶單位指定路徑的總長度。
值類型: ;默認值:無;動畫:是
注意:從SVG2開始,x,y,寬度,高度,rx和ry是幾何屬性,這意味着這些屬性也可以用作該元素的CSS屬性。
這個用例
由於<rect>
元素是SVG元素,因此要定位此類元素,則在使用SVG namespace訪問元素時必須明確指定xpath,如下所示:
對於<svg>
元素:
//*[name()="svg"]
對於<g>
元素:
//*[name()="svg"]/*[name()="g"]
對於<rect>
元素:
//*[name()="svg"]/*[name()="g"]/*[name()="rect"] //*[name()="svg"]/*[name()="rect"]