selenium-SVG 嵌入HTML,如何定位元素


 
 

背景,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訪問元素時必須明確指定,如下所示:


對於<svg>元素:

//*[name()="svg"] 


對於<g>元素:

//*[name()="svg"]/*[name()="g"] 


對於<rect>元素:

//*[name()="svg"]/*[name()="g"]/*[name()="rect"] //*[name()="svg"]/*[name()="rect"]

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM