Question

你好，我正在使用光滑的滑块，我想剪切路径容器，但剪辑路径不能正常工作..

这是我的svg路径

Private Sub FLEX1_LOAD()
      DataGridView1.Rows.Clear() 
      Dim strsql As String
      Dim rs2 As ADODB.Recordset
      strsql = "select * from voterlist where AREAID='" & Trim(lblAreaid.Text) & "'"
      rs2 = New ADODB.Recordset
      Call dbconnect2()
      rs2.Open(strsql,conne2,ADODB.CursorTypeEnum.adOpenStatic,ADODB.LockTypeEnum.adLockPessimistic)
      If rs2.RecordCount > 0 Then
       rs2.MoveFirst()
       For I = 0 To rs2.RecordCount - 1
          DataGridView1.Rows.Add(1)
          DataGridView1.Rows(J).Cells(0).Value = J + 1
          DataGridView1.Rows(J).Cells(1).Value =rs2.Fields("ID").Value
          DataGridView1.Rows(J).Cells(2).Value = rs2.Fields("NAM").Value & " " & rs2.Fields("SURNAME").Value & "/" & rs2.Fields("RTYPE").Value & "-" & rs2.Fields("RNAME").Value & " " & rs2.Fields("RSURNAME").Value
          DataGridView1.Rows(J).Cells(3).Value = rs2.Fields("AGE").Value
          J = J + 1
          rs2.MoveNext()
       Next
      End If
      rs2.Close()
      rs2 = Nothing
      conne2.Close()
End Sub

滑块有效，但剪辑路径不适合100％窗口..

谢谢..对不起我的英文..

Answer 1

您应该使用边界框单位将clipPath转换为一个：

<clipPath clipPathUnits="objectBoundingBox" ... >

使用边界框单位时，所有剪辑路径坐标应定义在0..1范围内。

http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

如果这样做，裁剪路径的大小将与应用它的元素大小相同。

img {
  width: 100%;
  clip-path: url(#mask1);
  -webkit-clip-path: url(#mask1);
}

<svg width="0" height="0">
    <defs>
        <clipPath id="mask1" clipPathUnits="objectBoundingBox">
            <path id="curve"
                  transform="scale(0.00135, 0.00254)"
                  d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
            </path>
        </clipPath>
    </defs>
</svg>


<img src="//placekitten.com/400/150"/>

我在上面的示例中所做的是使用transform将剪辑路径缩放到1x1的大小。这比使用新坐标重新创建形状更容易。

剪辑路径宽度不是100％宽度

1 个答案: