让RaphaelJS SVG填写整个容器

时间:2017-11-09 10:09:13

标签: svg responsive-design raphael

我想让我的页面的全尺寸SVG响应。这意味着:100%的宽度和高度应该调整。 The converter I used显然没有使路径正确,因为即使我这样做:

rsr.setViewBox(0, 0, 2560, 1440, true); //or 1920 and 1080
rsr.setSize("100%", "100%");

内部的实际内容未调整大小。调整SVG的大小并调整ViewBox的大小,但不会调整任何内容的大小。在不更改SVG文件中的实际路径的情况下,如何使其响应?示例可以在这里看到:

https://jsfiddle.net/Lmvpq7a3/

1 个答案:

答案 0 :(得分:1)

var rsr = Raphael('container', '959', '593'); 的目的是告诉broswer / SVG渲染器内容的界限是什么。这就是它如何知道缩放内容以适合您的视口的正确数量。

我不确定你从哪里得到2560x1440,但显然它与你的SVG(地图)的内容不匹配。解决方法是找到正确的值。有各种方法可以做到这一点。有时你可能不得不使用反复试验(正如@RobertLongson所说)。

在您的情况下,您已经拥有合适的值。在你的小提琴中你有:

var rsr = Raphael('container', '100%', '100%');
rsr.setViewBox(0, 0, 959, 593);

将SVG设置为固定宽度959x593。

要使其响应,您所要做的就是将其更改为

package com.example.t.videorecorder;

import android.content.Intent;
import android.media.MediaPlayer;
import android.net.Uri;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

static final int REQUEST_VIDEO_CAPTURE=1;



@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

public void startCamera(View view){
    Intent intent= new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
    if (intent.resolveActivity(getPackageManager())!=null){
        startActivityForResult(intent, REQUEST_VIDEO_CAPTURE);
    }
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intentintent) {

    VideoView vW=(VideoView)findViewById(R.id.videoView);
    if (requestCode==REQUEST_VIDEO_CAPTURE && resultCode==RESULT_OK){
        Uri video= intent.getData();
        vW.setVideoURI(video);
    }
}
}

https://jsfiddle.net/Lmvpq7a3/2/

相关问题