a

Câu hỏi Tạo một đối tượng hình ảnh svg có thể nhấp với onclick, tránh định vị tuyệt đối


Tôi đã cố gắng thay đổi hình ảnh trên trang web của mình từ img đến svg, thay đổi img thẻ cho embed và object thẻ. Nhưng, triển khai onclick chức năng, trước đây đã được chứa trong img thẻ, đang chứng minh khó khăn nhất.

tôi đã tìm thấy onclick không có tác dụng khi được đặt bên trong object hoặc là embed nhãn.

Vì vậy, tôi đã thực hiện một div dành riêng cho svg và được đặt onclick trong này div nhãn. Tuy nhiên, không có hiệu lực trừ khi khách truy cập nhấp vào các cạnh / đệm của hình ảnh.

Tôi đã đọc về phủ một div, nhưng tôi đang cố tránh sử dụng absolute định vị hoặc chỉ định position ở tất cả.

Có cách nào khác để áp dụng onclick vào một svg?

Có ai gặp phải vấn đề này? Các câu hỏi và đề xuất được hoan nghênh.


37
2018-02-19 12:05


gốc




Các câu trả lời:


Bạn có thể có một sự kiện onclick trong svg chính nó, tôi làm điều này tất cả các thời gian trong công việc của tôi. làm cho một rect trên không gian của svg của bạn, (để xác định nó cuối cùng, hãy nhớ svg sử dụng mô hình họa sĩ)

rect.btn {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}

sau đó như là một thuộc tính để rect thêm onclick (điều này có thể được thực hiện với js hoặc jquery là tốt).

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <circle ... //your img svg
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
  </g>
</svg>
</div>

điều này sẽ hoạt động trong hầu hết các trình duyệt hiện đại, http://caniuse.com/svg ... mặc dù nếu bạn cần khả năng tương thích chéo, bạn có thể triển khai Google Chrome Frame. http://www.google.com/chromeframe


48
2018-04-18 13:23



WOWZA! 3k lượt xem / 2 năm, và không ai đã nghĩ ra điều này? lol điên .. - RGB
Có điều này làm việc cho tôi chỉ muốn thêm một số ý kiến ​​/ giải thích. Vui lòng xem câu trả lời được gửi. - codepuppy
Giải pháp tốt. Đối với CSS, có vẻ như tất cả những gì cần thiết là fill-opacity: 0. Tại sao bạn đặt stroke, fill và stroke-opacity? - evanrmurphy
họ đang có chỉ để được rõ ràng, để ngăn chặn bất kỳ phong cách khác từ xâm nhập. - RGB
@DAG op không chỉ rõ rằng anh ta muốn sử dụng đối tượng hoặc nhúng, chỉ đơn thuần đề cập đến chúng như những thứ anh ta đã thử. - RGB


Điều này bắt đầu như một bình luận về giải pháp của RGB nhưng tôi không thể phù hợp với nó trong như vậy đã chuyển đổi nó thành một câu trả lời. Cảm hứng mà hoàn toàn là RGB.

Giải pháp của RGB làm việc cho tôi. Tuy nhiên, tôi muốn lưu ý một vài điểm có thể giúp những người khác đến bài đăng này (như tôi), những người không quen thuộc với SVG và những người có thể đã tạo ra tệp SVG của họ từ một gói đồ họa (như tôi đã có).

Vì vậy, để áp dụng các giải pháp của RGB tôi đã sử dụng:

CSS

 <style>
    rect.btn {
        stroke:#fff;
        fill:#fff;
        fill-opacity:0;
        stroke-opacity:0;
    }
</style>

Kịch bản jquery

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>   
<script type="text/javascript">
   $("document").ready(function(){
       $(".btn").bind("click", function(event){alert("clicked svg")});
   });
</script>

HTML để mã hóa việc bao gồm tệp SVG đã tồn tại của bạn trong thẻ nhóm bên trong mã SVG.

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
     <image x="0" y="0" width="10" height="10"
     xlink:href="../_public/_icons/booked.svg" width="10px"/>
    <rect class="btn" x="0" y="0" width="10" height="10"/>

  </g>
</svg>
</div>

Tuy nhiên, trong trường hợp của tôi, tôi có một số biểu tượng SVG mà tôi muốn có thể nhấp và kết hợp từng biểu tượng này vào thẻ SVG đang bắt đầu trở nên rườm rà.

Vì vậy, như là một cách tiếp cận thay thế, nơi tôi có thể sử dụng các lớp tôi sử dụng jquery.svg. Đây có lẽ là một ứng dụng đáng xấu hổ của plugin này có thể làm tất cả các loại công cụ với SVG. Nhưng nó làm việc bằng cách sử dụng mã sau đây:

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){
        $(".svgload").bind("click", function(event){alert("clicked svg")});

         for (var i=0; i < 99; i++) {
           $(".svgload:eq(" + i + ")").svg({
              onLoad: function(){
              var svg = $(".svgload:eq(" + i + ")").svg('get');
              svg.load("../_public/_icons/booked.svg", {addTo: true,  changeSize: false});        
              },
              settings: {}}
          ); 
        } 
    });
</script>

nơi HTML

<div class="svgload" style="width: 10px; height: 10px;"></div>

Ưu điểm của suy nghĩ của tôi là tôi có thể sử dụng lớp thích hợp, nơi có các biểu tượng cần thiết và tránh khá nhiều mã trong phần nội dung của HTML hỗ trợ khả năng đọc. Và tôi chỉ cần kết hợp tập tin SVG đã tồn tại từ trước.

Chỉnh sửa:  Đây là phiên bản gọn gàng của kịch bản lịch sự của Keith Wood: sử dụng cài đặt URL tải của .svg.

<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>       
<script type="text/javascript" src="jquery.svg.min.js"></script>
<script type="text/javascript">
    $("document").ready(function(){

      $('.svgload').on('click', function() {
          alert('clicked svg new');
      }).svg({loadURL: '../_public/_icons/booked.svg'});

    });
</script>

6
2017-10-24 18:08





Tôi đã làm việc này trên các phiên bản mới nhất của Firefox, Chrome, Safari và Opera.

Nó dựa trên một div trong suốt trước đối tượng có vị trí tuyệt đối và thiết lập chiều rộng và chiều cao để nó bao gồm thẻ đối tượng bên dưới.

Ở đây nó là, tôi đã được một chút lười biếng và sử dụng styes nội tuyến:

<div id="toolbar" style="width: 600px; height: 100px; position: absolute; z-index: 1;"></div>
<object data="interface.svg" width="600" height="100" type="image/svg+xml">
</object>

Tôi đã sử dụng JavaScript sau để kết nối sự kiện với nó:

<script type="text/javascript">
    var toolbar = document.getElementById("toolbar");
    toolbar.onclick = function (e) {
        alert("Hello");
    };
</script>

4
2017-08-18 21:57





Nó hoạt động bằng cách thay thế <embed/> gắn thẻ với <img/> và xóa thuộc tính type.

Ví dụ: trong mã của tôi, thay vì:

<embed src=\"./images/info_09c.svg\" type=\"image/svg+xml\" width=\"45\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'> 

mà không trả lời nhấp chuột, tôi đã viết:

<img src=\"./images/info_09c.svg\" height=\"25\" width=\"25\" onClick='afiseaza_indicatie($i, \"$indicatii[$i]\")'> 

Nó hoạt động trong Internet Explorer và Google Chrome, và tôi hy vọng rằng trong các trình duyệt khác nữa.


3
2018-03-24 00:00



Tôi đoán bạn đang thoát khỏi các trích dẫn cho xml hoặc một cái gì đó, nhưng điều này làm việc trong IE ít nhất, khi nó không hoạt động khi hiển thị một svg trong một <object> (tương tự như ví dụ nhúng). Miễn là bạn đang sử dụng các trình duyệt hiện đại, tôi không thấy tại sao đây không phải là cách dễ nhất khi sử dụng các công cụ html5 / js như <button> <img src = "your.svg"> </ button> - whyoz
Đã thử thay thế một tham chiếu <object> bằng img src để làm việc. Thử nghiệm làm việc dưới safari, chrome và firefox và chrome trên Android. Cảm ơn cho giải pháp này - nó đơn giản hơn nhiều và tránh lộn xộn svg của tôi với javascript nội tuyến. - Vivek Gani


Bạn có thể sử dụng mã sau:

<style>
    .svgwrapper {
        position: relative;
    }
    .svgwrapper {
        position: absolute;
        z-index: -1;
    }
</style>

<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

b3ng0 đã viết mã tương tự nhưng nó không hoạt động. z-index của phụ huynh phải là tự động.


1
2017-09-15 06:47





Bạn đã xem xét sử dụng CSS chưa z-index tài sản để làm cho dev container là "trên đầu trang" của svg? Bởi vì div là (có lẽ) trong suốt, bạn sẽ vẫn thấy hình ảnh chính xác như trước đây.

Điều này, tôi tin rằng, là cách thực hành tốt nhất, không hack, có ý định giải quyết vấn đề của bạn. z-index chỉ hữu ích cho các phần tử có position tài sản của fixed, relativehoặc, như bạn đã nghe, absolute. Tuy nhiên, bạn không thực sự phải di chuyển đối tượng.

Ví dụ:

<style>
    .svgwrapper {
        position: relative;
        z-index: 1;
    }
</style>
<div class="svgwrapper" onClick="function();">
    <object src="blah" />
</div>

Đối với những gì nó có giá trị, nó cũng sẽ được một chút thanh lịch và an toàn hơn để không sử dụng onClick ở tất cả, nhưng thay vì để ràng buộc các sự kiện nhấp chuột bằng cách sử dụng javascript. Đó là một vấn đề khác hoàn toàn, mặc dù.


0
2018-02-19 20:23



Điều này không hoạt động. - Richard Garside


Giả sử bạn không cần hỗ trợ trình duyệt chéo (điều này là không thể nếu không có plugin cho IE), bạn đã thử sử dụng chưa svg làm hình nền?

Công cụ thử nghiệm chắc chắn, nhưng nghĩ tôi sẽ đề cập đến nó.


0
2018-03-24 15:09



Ý tưởng hay, nhưng thiếu sự hỗ trợ của Firefox đã khiến tôi bỏ ý tưởng này. - Richard Garside


Có lẽ những gì bạn đang tìm kiếm là phần tử SVG sự kiện con trỏ tài sản mà bạn có thể đọc tại Tài liệu nhóm làm việc SVG w3C.

Bạn có thể sử dụng CSS để đặt những gì xảy ra với phần tử SVG khi được nhấp vào, v.v.


0
2018-04-01 02:08